

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Chart (lv_chart) &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="../../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../../_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="../../_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/v8.4/en/html/widgets/extra/chart.html" />

  
  <!--[if lt IE 9]>
    <script src="../../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../../" src="../../_static/documentation_options.js"></script>
        <script data-url_root="../../" id="documentation_options" src="../../_static/documentation_options.js"></script>
        <script src="../../_static/jquery.js"></script>
        <script src="../../_static/underscore.js"></script>
        <script src="../../_static/doctools.js"></script>
        <script src="../../_static/js/custom.js"></script>
    
    <script type="text/javascript" src="../../_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="../../genindex.html" />
    <link rel="search" title="Search" href="../../search.html" />
    <link rel="next" title="Color wheel (lv_colorwheel)" href="colorwheel.html" />
    <link rel="prev" title="Calendar (lv_calendar)" href="calendar.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../../index.html">
          

          
            
            <img src="../../_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.4
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../../intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#lvgl-doesn-t-start-randomly-crashes-or-nothing-is-drawn-on-the-display-what-can-be-the-problem">LVGL doesn't start, randomly crashes or nothing is drawn on the display. What can be the problem?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#my-display-driver-is-not-called-what-have-i-missed">My display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#why-do-i-see-nonsense-colors-on-the-screen">Why do I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../examples.html">Examples</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../examples.html#get-started">Get started</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#a-button-with-a-label-and-react-on-click-event">A button with a label and react on click event</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#create-styles-from-scratch-for-buttons">Create styles from scratch for buttons</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#create-a-slider-and-write-its-value-on-a-label">Create a slider and write its value on a label</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../examples.html#styles">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#size-styles">Size styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#background-styles">Background styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#border-styles">Border styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#outline-styles">Outline styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#shadow-styles">Shadow styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#image-styles">Image styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#text-styles">Text styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#line-styles">Line styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#transition">Transition</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#using-multiple-styles">Using multiple styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#add-styles-to-parts-and-states">Add styles to parts and states</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#extending-the-current-theme">Extending the current theme</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#opacity-and-transformations">Opacity and Transformations</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../examples.html#animations">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#start-animation-on-an-event">Start animation on an event</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#playback-animation">Playback animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#animation-timeline">Animation timeline</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../examples.html#events">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#button-click-event">Button click event</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#handle-multiple-events">Handle multiple events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#event-bubbling">Event bubbling</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../examples.html#layouts">Layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#flex">Flex</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#a-simple-row-and-a-column-layout-with-flexbox">A simple row and a column layout with flexbox</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#arrange-items-in-rows-with-wrap-and-even-spacing">Arrange items in rows with wrap and even spacing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#demonstrate-flex-grow">Demonstrate flex grow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#id1">Demonstrate flex grow.</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#demonstrate-column-and-row-gap-style-properties">Demonstrate column and row gap style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#rtl-base-direction-changes-order-of-the-items">RTL base direction changes order of the items</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#grid">Grid</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#a-simple-grid">A simple grid</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#demonstrate-cell-placement-and-span">Demonstrate cell placement and span</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#demonstrate-grid-s-free-unit">Demonstrate grid's &quot;free unit&quot;</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#demonstrate-track-placement">Demonstrate track placement</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#demonstrate-column-and-row-gap">Demonstrate column and row gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#demonstrate-rtl-direction-on-grid">Demonstrate RTL direction on grid</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../examples.html#scrolling">Scrolling</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#nested-scrolling">Nested scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#snapping">Snapping</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#floating-button">Floating button</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#styling-the-scrollbars">Styling the scrollbars</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#right-to-left-scrolling">Right to left scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#translate-on-scroll">Translate on scroll</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../examples.html#widgets">Widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#base-object">Base object</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#base-objects-with-custom-styles">Base objects with custom styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#make-an-object-draggable">Make an object draggable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-arc">Simple Arc</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#loader-with-arc">Loader with Arc</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#bar">Bar</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-bar">Simple Bar</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#styling-a-bar">Styling a bar</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#temperature-meter">Temperature meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#stripe-pattern-and-range-value">Stripe pattern and range value</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#bar-with-ltr-and-rtl-base-direction">Bar with LTR and RTL base direction</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#custom-drawer-to-show-the-current-value">Custom drawer to show the current value</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#button">Button</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-buttons">Simple Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#styling-buttons">Styling buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#gummy-button">Gummy button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#button-matrix">Button matrix</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-button-matrix">Simple Button matrix</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#custom-buttons">Custom buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#pagination">Pagination</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#calendar">Calendar</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#calendar-with-header">Calendar with header</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#canvas">Canvas</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#drawing-on-the-canvas-and-rotate">Drawing on the Canvas and rotate</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#transparent-canvas-with-chroma-keying">Transparent Canvas with chroma keying</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#chart">Chart</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#line-chart">Line Chart</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#faded-area-line-chart-with-custom-division-lines">Faded area line chart with custom division lines</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#axis-ticks-and-labels-with-scrolling">Axis ticks and labels with scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#show-the-value-of-the-pressed-points">Show the value of the pressed points</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#display-1000-data-points-with-zooming-and-scrolling">Display 1000 data points with zooming and scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#show-cursor-on-the-clicked-point">Show cursor on the clicked point</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#scatter-chart">Scatter chart</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#stacked-area-chart">Stacked area chart</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#checkbox">Checkbox</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-checkboxes">Simple Checkboxes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#checkboxes-as-radio-buttons">Checkboxes as radio buttons</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#colorwheel">Colorwheel</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-colorwheel">Simple Colorwheel</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#dropdown">Dropdown</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-drop-down-list">Simple Drop down list</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#drop-down-in-four-directions">Drop down in four directions</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#menu">Menu</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#image-from-variable-and-symbol">Image from variable and symbol</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#image-recoloring">Image recoloring</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#rotate-and-zoom">Rotate and zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#image-offset-and-styling">Image offset and styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#image-button">Image button</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-image-button">Simple Image button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#keyboard">Keyboard</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#keyboard-with-text-area">Keyboard with text area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#label">Label</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#line-wrap-recoloring-and-scrolling">Line wrap, recoloring and scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#text-shadow">Text shadow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#show-ltr-rtl-and-chinese-texts">Show LTR, RTL and Chinese texts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#draw-label-with-gradient-color">Draw label with gradient color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#customize-circular-scrolling-animation">Customize circular scrolling animation</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#led">LED</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#led-with-custom-style">LED with custom style</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-line">Simple Line</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#list">List</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-list">Simple List</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#sorting-a-list-using-up-and-down-buttons">Sorting a List using up and down buttons</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#id2">Menu</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-menu">Simple Menu</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-menu-with-root-btn">Simple Menu with root btn</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-menu-with-custom-header">Simple Menu with custom header</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-menu-with-floating-btn-to-add-new-menu-page">Simple Menu with floating btn to add new menu page</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#complex-menu">Complex Menu</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#meter">Meter</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-meter">Simple meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#a-meter-with-multiple-arcs">A meter with multiple arcs</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#a-clock-from-a-meter">A clock from a meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#pie-chart">Pie chart</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#message-box">Message box</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-message-box">Simple Message box</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#roller">Roller</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-roller">Simple Roller</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#styling-the-roller">Styling the roller</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#add-fade-mask-to-roller">add fade mask to roller</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#slider">Slider</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-slider">Simple Slider</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#slider-with-custom-style">Slider with custom style</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#slider-with-extended-drawer">Slider with extended drawer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#span">Span</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#span-with-custom-styles">Span with custom styles</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#spinbox">Spinbox</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-spinbox">Simple Spinbox</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#spinner">Spinner</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-spinner">Simple spinner</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#switch">Switch</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-switch">Simple Switch</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#table">Table</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-table">Simple table</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#lightweighted-list-from-table">Lightweighted list from table</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#tabview">Tabview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-tabview">Simple Tabview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#tabs-on-the-left-styling-and-no-scrolling">Tabs on the left, styling and no scrolling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#textarea">Textarea</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-text-area">Simple Text area</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#text-area-with-password-field">Text area with password field</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#text-auto-formatting">Text auto-formatting</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#id3">Tabview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#tileview-with-content">Tileview with content</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../examples.html#window">Window</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../examples.html#simple-window">Simple window</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../get-started/index.html">Get started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../get-started/quick-overview.html">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/quick-overview.html#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/quick-overview.html#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/quick-overview.html#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/quick-overview.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#a-button-with-a-label-and-react-on-click-event">A button with a label and react on click event</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#create-styles-from-scratch-for-buttons">Create styles from scratch for buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/quick-overview.html#create-a-slider-and-write-its-value-on-a-label">Create a slider and write its value on a label</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/quick-overview.html#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../get-started/platforms/index.html">Platforms</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/nxp.html">NXP</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/nxp.html#hw-acceleration-for-nxp-imx-rt-platforms">HW acceleration for NXP iMX RT platforms</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/stm32.html">STM32</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/espressif.html">Espressif (ESP32 chip series)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/espressif.html#lvgl-demo-project-for-esp32">LVGL demo project for ESP32</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/espressif.html#using-lvgl-in-your-esp-idf-project">Using LVGL in your ESP-IDF project</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/espressif.html#using-lvgl-esp32-drivers-in-esp-idf-project">Using lvgl_esp32_drivers in ESP-IDF project</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/renesas.html">Renesas</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/renesas.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/renesas.html#hw-acceleration-for-renesas-ra6m3-platforms">HW acceleration for Renesas RA6M3 platforms</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/arduino.html">Arduino</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/arduino.html#get-the-lvgl-arduino-library">Get the LVGL Arduino library</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/arduino.html#initialize-and-run-lvgl">Initialize and run LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/arduino.html#use-the-examples-and-demos">Use the examples and demos</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/tasmota-berry.html">Tasmota and berry</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/tasmota-berry.html#what-is-tasmota">What is Tasmota?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/tasmota-berry.html#what-is-berry">What is Berry?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/tasmota-berry.html#why-lvgl-tasmota-berry">Why LVGL + Tasmota + Berry?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/tasmota-berry.html#so-what-does-it-look-like">So what does it look like?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/tasmota-berry.html#how-can-i-use-it">How can I use it?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/tasmota-berry.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/cmake.html">CMake</a><ul>
<li class="toctree-l4"><a class="reference external" href="https://docs.espressif.com/projects/esp-idf/en/v3.3/get-started-cmake/index.html">Espressif (ESP32)</a></li>
<li class="toctree-l4"><a class="reference external" href="https://docs.micropython.org/en/v1.15/develop/cmodules.html">MicroPython</a></li>
<li class="toctree-l4"><a class="reference external" href="https://docs.zephyrproject.org/latest/guides/zephyr_cmake_package.html">Zephyr</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/cmake.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/cmake.html#building-lvgl-with-cmake">Building LVGL with CMake</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/cmake.html#building-lvgl-examples-with-cmake">Building LVGL examples with CMake</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/platforms/cmake.html#building-lvgl-drivers-and-demos-with-cmake">Building LVGL drivers and demos with CMake</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/platforms/cmake.html#build-shared-libraries-with-cmake">Build shared libraries with CMake</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../get-started/os/index.html">(RT)OS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/os/nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/os/nuttx.html#what-is-nuttx">What is NuttX?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/os/nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/os/nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/os/nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/os/rt-thread.html">RT-Thread RTOS</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/os/rt-thread.html#what-is-rt-thread">What is RT-Thread?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/os/rt-thread.html#how-to-run-lvgl-on-rt-thread">How to run LVGL on RT-Thread?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/os/freertos.html">FreeRTOS</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/os/zephyr.html">Zephyr</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../get-started/bindings/index.html">Bindings</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/bindings/micropython.html">Micropython</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/bindings/micropython.html#what-is-micropython">What is Micropython?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/bindings/micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/bindings/micropython.html#so-what-does-it-look-like">So what does it look like?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/bindings/micropython.html#how-can-i-use-it">How can I use it?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../get-started/bindings/micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../get-started/bindings/cpp.html">Cpp</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../porting/project.html">Set up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/project.html#add-lvgl-to-your-project">Add lvgl to your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/project.html#automatically-add-files">Automatically add files</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/project.html#make-and-cmake">Make and CMake</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/project.html#other-platforms-and-tools">Other platforms and tools</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/project.html#demos-and-examples">Demos and Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/display.html#buffering-modes">Buffering modes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#one-buffer">One buffer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#two-buffers">Two buffers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#full-refresh">Full refresh</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#direct-mode">Direct mode</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/display.html#other-options">Other options</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/display.html#decoupling-the-display-refresh-timer">Decoupling the display refresh timer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/timer-handler.html">Timer Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../porting/gpu.html">Add custom GPU</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../porting/gpu.html#draw-context">Draw context</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/gpu.html#fields">Fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/gpu.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/gpu.html#software-renderer">Software renderer</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/gpu.html#blend-callback">Blend callback</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/gpu.html#extend-the-software-renderer">Extend the software renderer</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../porting/gpu.html#new-blend-callback">New blend callback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../porting/gpu.html#new-rectangle-drawer">New rectangle drawer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../porting/gpu.html#fully-custom-draw-engine">Fully custom draw engine</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../overview/index.html">Overview</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../overview/object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/object.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/object.html#snapshot">Snapshot</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/coords.html">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/coords.html#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/coords.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#forced-value-inheritance-default-value">Forced value inheritance/default value</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#opacity-blend-modes-and-transformations">Opacity, Blend modes and Transformations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#size-styles">Size styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#background-styles">Background styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#border-styles">Border styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#outline-styles">Outline styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#shadow-styles">Shadow styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#image-styles">Image styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#arc-styles">Arc styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#text-styles">Text styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#line-styles">Line styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#transition">Transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#using-multiple-styles">Using multiple styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#id1">Local styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#add-styles-to-parts-and-states">Add styles to parts and states</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#extending-the-current-theme">Extending the current theme</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style.html#opacity-and-transformations">Opacity and Transformations</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#transform-angle">transform_angle</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#transform-pivot-x">transform_pivot_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#transform-pivot-y">transform_pivot_y</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-grad">bg_grad</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-dither-mode">bg_dither_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#opa-layered">opa_layered</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#anim">anim</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/scroll.html">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/scroll.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/scroll.html#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/scroll.html#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/scroll.html#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/scroll.html#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/scroll.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#nested-scrolling">Nested scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#id1">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#floating-button">Floating button</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#styling-the-scrollbars">Styling the scrollbars</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#right-to-left-scrolling">Right to left scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/scroll.html#translate-on-scroll">Translate on scroll</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/layer.html#change-order">Change order</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#button-click-event">Button click event</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#handle-multiple-events">Handle multiple events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/event.html#id1">Event bubbling</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/indev.html#pointers">Pointers</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/indev.html#cursor">Cursor</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/indev.html#gestures">Gestures</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/font.html#compressed-fonts">Compressed fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#add-a-new-font">Add a new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#load-a-font-at-run-time">Load a font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#add-a-new-font-engine">Add a new font engine</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/font.html#use-font-fallback">Use font fallback</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/image.html#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/file-system.html#adding-a-driver">Adding a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/file-system.html#use-drives-for-images">Use drives for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/animation.html#timeline">Timeline</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/animation.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/animation.html#start-animation-on-an-event">Start animation on an event</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/animation.html#playback-animation">Playback animation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/animation.html#animation-timeline">Animation timeline</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/animation.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/drawing.html#masking">Masking</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/drawing.html#using-masks">Using masks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/drawing.html#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/drawing.html#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/drawing.html#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/drawing.html#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/drawing.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/renderers/index.html">Renderers and GPUs</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../overview/renderers/sw.html">Software renderer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/renderers/sdl.html">SDL renderer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/renderers/arm-2d.html">Arm-2D GPU</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../overview/renderers/arm-2d.html#how-to-use">How to Use</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/renderers/arm-2d.html#design-considerations">Design Considerations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../overview/renderers/arm-2d.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/renderers/pxp-vglite.html">NXP PXP and VGLite GPU</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../overview/renderers/dma2d.html">DMA2D GPU</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../overview/new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1 current"><a class="reference internal" href="../index.html">Widgets</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="../obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#display-and-screens">Display and Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#base-objects-with-custom-styles">Base objects with custom styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../obj.html#make-an-object-draggable">Make an object draggable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2 current"><a class="reference internal" href="index.html">Extra widgets</a><ul class="current">
<li class="toctree-l3"><a class="reference internal" href="animimg.html">Animation Image (lv_animimg)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="animimg.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="animimg.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="animimg.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="animimg.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="animimg.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="animimg.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="animimg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3 current"><a class="current reference internal" href="#">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="menu.html">Menu (lv_menu)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="menu.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="menu.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="menu.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="menu.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="menu.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="menu.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="menu.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/flex.html#style-interface">Style interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#internal-padding">Internal padding</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#a-simple-row-and-a-column-layout-with-flexbox">A simple row and a column layout with flexbox</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#arrange-items-in-rows-with-wrap-and-even-spacing">Arrange items in rows with wrap and even spacing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#demonstrate-flex-grow">Demonstrate flex grow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#id1">Demonstrate flex grow.</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#demonstrate-column-and-row-gap-style-properties">Demonstrate column and row gap style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/flex.html#rtl-base-direction-changes-order-of-the-items">RTL base direction changes order of the items</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/grid.html#style-interface">Style interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#internal-padding">Internal padding</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#a-simple-grid">A simple grid</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#demonstrate-cell-placement-and-span">Demonstrate cell placement and span</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#demonstrate-grid-s-free-unit">Demonstrate grid's &quot;free unit&quot;</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#demonstrate-track-placement">Demonstrate track placement</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#demonstrate-column-and-row-gap">Demonstrate column and row gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../layouts/grid.html#demonstrate-rtl-direction-on-grid">Demonstrate RTL direction on grid</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../libs/index.html">3rd party libraries</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../libs/fsdrv.html">File System Interfaces</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/fsdrv.html#built-in-wrappers">Built in wrappers</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/fsdrv.html#fatfs">FATFS</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/fsdrv.html#littlefs">LittleFS</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/fsdrv.html#stdio">STDIO</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/fsdrv.html#posix">POSIX</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/fsdrv.html#win32">WIN32</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/fsdrv.html#usage">Usage</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/bmp.html">BMP decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/bmp.html#limitations">Limitations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/bmp.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/bmp.html#open-a-bmp-image-from-file">Open a BMP image from file</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/bmp.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/sjpg.html">JPG decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/sjpg.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/sjpg.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/sjpg.html#converter">Converter</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/sjpg.html#converting-jpg-to-c-array">Converting JPG to C array</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/sjpg.html#converting-jpg-to-sjpg">Converting JPG to SJPG</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/sjpg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/sjpg.html#load-an-sjpg-image">Load an SJPG image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/sjpg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/png.html">PNG decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/png.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/png.html#open-a-png-image-from-file-and-variable">Open a PNG image from file and variable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/png.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/gif.html">GIF decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/gif.html#convert-gif-files-to-c-array">Convert GIF files to C array</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/gif.html#use-gif-images-from-file">Use GIF images from file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/gif.html#memory-requirements">Memory requirements</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/gif.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/gif.html#open-a-gif-image-from-file-and-variable">Open a GIF image from file and variable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/gif.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/freetype.html">FreeType support</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/freetype.html#install-freetype">Install FreeType</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/freetype.html#add-freetype-to-your-project">Add FreeType to your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/freetype.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/freetype.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/freetype.html#open-a-front-with-freetype">Open a front with FreeType</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/freetype.html#learn-more">Learn more</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/freetype.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/tiny_ttf.html">Tiny TTF font engine</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/tiny_ttf.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/tiny_ttf.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/qrcode.html">QR code</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/qrcode.html#get-started">Get started</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/qrcode.html#notes">Notes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/qrcode.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/qrcode.html#create-a-qr-code">Create a QR Code</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/qrcode.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/rlottie.html">Lottie player</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/rlottie.html#build-rlottie">Build Rlottie</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/rlottie.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/rlottie.html#use-rlottie-from-file">Use Rlottie from file</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/rlottie.html#use-rlottie-from-raw-string-data">Use Rlottie from raw string data</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/rlottie.html#getting-animations">Getting animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/rlottie.html#controlling-animations">Controlling animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/rlottie.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/rlottie.html#load-a-lottie-animation-from-raw-data">Load a Lottie animation from raw data</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/rlottie.html#load-a-lottie-animation-from-a-file">Load a Lottie animation from a file</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/rlottie.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../libs/ffmpeg.html">FFmpeg support</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../libs/ffmpeg.html#install-ffmpeg">Install FFmpeg</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/ffmpeg.html#add-ffmpeg-to-your-project">Add FFmpeg to your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/ffmpeg.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/ffmpeg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../libs/ffmpeg.html#decode-image">Decode image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../libs/ffmpeg.html#decode-video">Decode video</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../libs/ffmpeg.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../others/index.html">Others</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../others/snapshot.html">Snapshot</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../others/snapshot.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/snapshot.html#free-the-image">Free the Image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/snapshot.html#use-existing-buffer">Use Existing Buffer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/snapshot.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/snapshot.html#simple-snapshot-example">Simple snapshot example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/snapshot.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../others/monkey.html">Monkey</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../others/monkey.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/monkey.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/monkey.html#touchpad-monkey-example">Touchpad monkey example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/monkey.html#encoder-monkey-example">Encoder monkey example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/monkey.html#button-monkey-example">Button monkey example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/monkey.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../others/gridnav.html">Grid navigation</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../others/gridnav.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/gridnav.html#focusable-objects">Focusable objects</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/gridnav.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/gridnav.html#basic-grid-navigation">Basic grid navigation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/gridnav.html#grid-navigation-on-a-list">Grid navigation on a list</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/gridnav.html#nested-grid-navigations">Nested grid navigations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/gridnav.html#simple-navigation-on-a-list-widget">Simple navigation on a list widget</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/gridnav.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../others/fragment.html">Fragment</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../others/fragment.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/fragment.html#create-fragment-class">Create Fragment Class</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/fragment.html#use-lv-fragment-manager">Use <code class="docutils literal notranslate"><span class="pre">lv_fragment_manager</span></code></a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/fragment.html#fragment-based-navigation">Fragment Based Navigation</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/fragment.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/fragment.html#basic-fragment-usage">Basic fragment usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/fragment.html#stack-navigation-example">Stack navigation example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/fragment.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../others/msg.html">Messaging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../others/msg.html#ids">IDs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/msg.html#send-message">Send message</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/msg.html#subscribe-to-a-message">Subscribe to a message</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/msg.html#subscribe-with-an-lv-obj">Subscribe with an lv_obj</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/msg.html#unsubscribe">Unsubscribe</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/msg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/msg.html#slider-to-label-messaging">Slider to label messaging</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/msg.html#handling-login-and-its-states">Handling login and its states</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/msg.html#setting-the-same-value-from-many-sources">Setting the same value from many sources</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/msg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../others/imgfont.html">Image font (imgfont)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../others/imgfont.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/imgfont.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/imgfont.html#use-emojis-in-a-text">Use emojis in a text.</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/imgfont.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../others/ime_pinyin.html">Pinyin IME</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../others/ime_pinyin.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/ime_pinyin.html#custom-dictionary">Custom dictionary</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/ime_pinyin.html#dictionary-format">Dictionary format</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/ime_pinyin.html#apply-new-dictionary">Apply new dictionary</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/ime_pinyin.html#input-modes">Input modes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../others/ime_pinyin.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../others/ime_pinyin.html#pinyin-ime-26-key-input">Pinyin IME 26 key input</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../others/ime_pinyin.html#pinyin-ime-9-key-input">Pinyin IME 9 key input</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../../others/ime_pinyin.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../CONTRIBUTING.html">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../CONTRIBUTING.html#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../CONTRIBUTING.html#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#from-command-line">From command line</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#commit-message-format">Commit message format</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../CONTRIBUTING.html#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../../CONTRIBUTING.html#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../CONTRIBUTING.html#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../CONTRIBUTING.html#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="../../CONTRIBUTING.html#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../../CONTRIBUTING.html#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CONTRIBUTING.html#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../CHANGELOG.html#v8-4-0-19-march-2024">v8.4.0 19 March 2024</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../../CHANGELOG.html#breaking-changes">Breaking Changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CHANGELOG.html#architectural">Architectural</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CHANGELOG.html#new-features">New Features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CHANGELOG.html#performance">Performance</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CHANGELOG.html#fixes">Fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CHANGELOG.html#docs">Docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../../CHANGELOG.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../../ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../../ROADMAP.html#v8-2">v8.2</a></li>
<li class="toctree-l2"><a class="reference internal" href="../../ROADMAP.html#ideas">Ideas</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../../index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          

















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../../index.html" class="icon icon-home"></a> &raquo;</li>
        
          <li><a href="../index.html">Widgets</a> &raquo;</li>
        
          <li><a href="index.html">Extra widgets</a> &raquo;</li>
        
      <li>Chart (lv_chart)</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <a href="https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/docs/widgets/extra/chart.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="chart-lv-chart">
<h1>Chart (lv_chart)<a class="headerlink" href="#chart-lv-chart" title="Permalink to this headline">¶</a></h1>
<div class="section" id="overview">
<h2>Overview<a class="headerlink" href="#overview" title="Permalink to this headline">¶</a></h2>
<p>Charts are a basic object to visualize data points. Currently <em>Line</em> charts (connect points with lines and/or draw points on them) and <em>Bar</em> charts are supported.</p>
<p>Charts can have:</p>
<ul class="simple">
<li><p>division lines</p></li>
<li><p>2 y axis</p></li>
<li><p>axis ticks and texts on ticks</p></li>
<li><p>cursors</p></li>
<li><p>scrolling and zooming</p></li>
</ul>
</div>
<div class="section" id="parts-and-styles">
<h2>Parts and Styles<a class="headerlink" href="#parts-and-styles" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_PART_MAIN</span></code> The background of the chart. Uses all the typical background and <em>line</em> (for the division lines) related style properties. <em>Padding</em> makes the series area smaller. For column charts <code class="docutils literal notranslate"><span class="pre">pad_column</span></code> sets the space between the columns of the adjacent indices.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_PART_SCROLLBAR</span></code> The scrollbar used if the chart is zoomed. See the <a class="reference internal" href="../obj.html"><span class="doc">Base object</span></a>'s documentation for details.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_PART_ITEMS</span></code> Refers to the line or bar series.</p>
<ul>
<li><p>Line chart: The <em>line</em> properties are used by the lines. <code class="docutils literal notranslate"><span class="pre">width</span></code>, <code class="docutils literal notranslate"><span class="pre">height</span></code>, <code class="docutils literal notranslate"><span class="pre">bg_color</span></code> and <code class="docutils literal notranslate"><span class="pre">radius</span></code> is used to set the appearance of points.</p></li>
<li><p>Bar chart: The typical background properties are used to style the bars. <code class="docutils literal notranslate"><span class="pre">pad_column</span></code> sets the space between the columns on the same index.</p></li>
</ul>
</li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_PART_INDICATOR</span></code> Refers to the points on line and scatter chart (small circles or squares).</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_PART_CURSOR</span></code> <em>Line</em> properties are used to style the cursors.  <code class="docutils literal notranslate"><span class="pre">width</span></code>, <code class="docutils literal notranslate"><span class="pre">height</span></code>, <code class="docutils literal notranslate"><span class="pre">bg_color</span></code> and <code class="docutils literal notranslate"><span class="pre">radius</span></code> are used to set the appearance of points.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_PART_TICKS</span></code> <em>Line</em> and <em>Text</em> style properties are used to style the ticks</p></li>
</ul>
</div>
<div class="section" id="usage">
<h2>Usage<a class="headerlink" href="#usage" title="Permalink to this headline">¶</a></h2>
<div class="section" id="chart-type">
<h3>Chart type<a class="headerlink" href="#chart-type" title="Permalink to this headline">¶</a></h3>
<p>The following data display types exist:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_TYPE_NONE</span></code>  Do not display any data. Can be used to hide the series.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_TYPE_LINE</span></code>  Draw lines between the data points and/or points (rectangles or circles) on the data points.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_TYPE_BAR</span></code> - Draw bars.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_TYPE_SCATTER</span></code> - X/Y chart drawing point's and lines between the points. .</p></li>
</ul>
<p>You can specify the display type with <code class="docutils literal notranslate"><span class="pre">lv_chart_set_type(chart,</span> <span class="pre">LV_CHART_TYPE_...)</span></code>.</p>
</div>
<div class="section" id="data-series">
<h3>Data series<a class="headerlink" href="#data-series" title="Permalink to this headline">¶</a></h3>
<p>You can add any number of series to the charts by <code class="docutils literal notranslate"><span class="pre">lv_chart_add_series(chart,</span> <span class="pre">color,</span> <span class="pre">axis)</span></code>. This allocates an <code class="docutils literal notranslate"><span class="pre">lv_chart_series_t</span></code> structure which contains the chosen <code class="docutils literal notranslate"><span class="pre">color</span></code> and an array for the data points.
<code class="docutils literal notranslate"><span class="pre">axis</span></code> can have the following values:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_PRIMARY_Y</span></code> Left axis</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_SECONDARY_Y</span></code> Right axis</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_PRIMARY_X</span></code> Bottom axis</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_SECONDARY_X</span></code> Top axis</p></li>
</ul>
<p><code class="docutils literal notranslate"><span class="pre">axis</span></code> tells which axis's range should be used te scale the values.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_chart_set_ext_y_array(chart,</span> <span class="pre">ser,</span> <span class="pre">value_array)</span></code> makes the chart use an external array for the given series.
<code class="docutils literal notranslate"><span class="pre">value_array</span></code> should look like this: <code class="docutils literal notranslate"><span class="pre">lv_coord_t</span> <span class="pre">*</span> <span class="pre">value_array[num_points]</span></code>. The array size needs to be large enough to hold all the points of that series.
The array's pointer will be saved in the chart so it needs to be global, static or dynamically allocated.
Note: you should call <code class="docutils literal notranslate"><span class="pre">lv_chart_refresh(chart)</span></code> after the external data source has been updated to update the chart.</p>
<p>The value array of a series can be obtained with <code class="docutils literal notranslate"><span class="pre">lv_chart_get_y_array(chart,</span> <span class="pre">ser)</span></code>, which can be used with <code class="docutils literal notranslate"><span class="pre">ext_array</span></code> or <em>normal array</em>s.</p>
<p>For <code class="docutils literal notranslate"><span class="pre">LV_CHART_TYPE_SCATTER</span></code> type  <code class="docutils literal notranslate"><span class="pre">lv_chart_set_ext_x_array(chart,</span> <span class="pre">ser,</span> <span class="pre">value_array)</span></code> and <code class="docutils literal notranslate"><span class="pre">lv_chart_get_x_array(chart,</span> <span class="pre">ser)</span></code> can be used as well.</p>
</div>
<div class="section" id="modify-the-data">
<h3>Modify the data<a class="headerlink" href="#modify-the-data" title="Permalink to this headline">¶</a></h3>
<p>You have several options to set the data of series:</p>
<ol class="simple">
<li><p>Set the values manually in the array like <code class="docutils literal notranslate"><span class="pre">ser1-&gt;points[3]</span> <span class="pre">=</span> <span class="pre">7</span></code> and refresh the chart with <code class="docutils literal notranslate"><span class="pre">lv_chart_refresh(chart)</span></code>.</p></li>
<li><p>Use <code class="docutils literal notranslate"><span class="pre">lv_chart_set_value_by_id(chart,</span> <span class="pre">ser,</span> <span class="pre">id,</span> <span class="pre">value)</span></code> where <code class="docutils literal notranslate"><span class="pre">id</span></code> is the index of the point you wish to update.</p></li>
<li><p>Use the <code class="docutils literal notranslate"><span class="pre">lv_chart_set_next_value(chart,</span> <span class="pre">ser,</span> <span class="pre">value)</span></code>.</p></li>
<li><p>Initialize all points to a given value with: <code class="docutils literal notranslate"><span class="pre">lv_chart_set_all_value(chart,</span> <span class="pre">ser,</span> <span class="pre">value)</span></code>.</p></li>
</ol>
<p>Use <code class="docutils literal notranslate"><span class="pre">LV_CHART_POINT_NONE</span></code> as value to make the library skip drawing that point, column, or line segment.</p>
<p>For <code class="docutils literal notranslate"><span class="pre">LV_CHART_TYPE_SCATTER</span></code> type  <code class="docutils literal notranslate"><span class="pre">lv_chart_set_value_by_id2(chart,</span> <span class="pre">ser,</span> <span class="pre">id,</span> <span class="pre">value)</span></code> and <code class="docutils literal notranslate"><span class="pre">lv_chart_set_next_value2(chart,</span> <span class="pre">ser,</span> <span class="pre">x_valuem</span> <span class="pre">y_value)</span></code> can be used as well.</p>
</div>
<div class="section" id="update-modes">
<h3>Update modes<a class="headerlink" href="#update-modes" title="Permalink to this headline">¶</a></h3>
<p><code class="docutils literal notranslate"><span class="pre">lv_chart_set_next_value</span></code> can behave in two ways depending on <em>update mode</em>:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_UPDATE_MODE_SHIFT</span></code> Shift old data to the left and add the new one to the right.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_UPDATE_MODE_CIRCULAR</span></code> - Add the new data in circular fashion, like an ECG diagram.</p></li>
</ul>
<p>The update mode can be changed with <code class="docutils literal notranslate"><span class="pre">lv_chart_set_update_mode(chart,</span> <span class="pre">LV_CHART_UPDATE_MODE_...)</span></code>.</p>
</div>
<div class="section" id="number-of-points">
<h3>Number of points<a class="headerlink" href="#number-of-points" title="Permalink to this headline">¶</a></h3>
<p>The number of points in the series can be modified by <code class="docutils literal notranslate"><span class="pre">lv_chart_set_point_count(chart,</span> <span class="pre">point_num)</span></code>. The default value is 10.
Note: this also affects the number of points processed when an external buffer is assigned to a series, so you need to be sure the external array is large enough.</p>
<div class="section" id="handling-large-number-of-points">
<h4>Handling large number of points<a class="headerlink" href="#handling-large-number-of-points" title="Permalink to this headline">¶</a></h4>
<p>On line charts, if the number of points is greater than the pixels horizontally, the Chart will draw only vertical lines to make the drawing of large amount of data effective.
If there are, let's say, 10 points to a pixel, LVGL searches the smallest and the largest value and draws a vertical lines between them to ensure no peaks are missed.</p>
</div>
</div>
<div class="section" id="vertical-range">
<h3>Vertical range<a class="headerlink" href="#vertical-range" title="Permalink to this headline">¶</a></h3>
<p>You can specify the minimum and maximum values in y-direction with <code class="docutils literal notranslate"><span class="pre">lv_chart_set_range(chart,</span> <span class="pre">axis,</span> <span class="pre">min,</span> <span class="pre">max)</span></code>.
<code class="docutils literal notranslate"><span class="pre">axis</span></code> can be <code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_PRIMARY</span></code> (left axis) or <code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_SECONDARY</span></code> (right axis).</p>
<p>The value of the points will be scaled proportionally. The default range is: 0..100.</p>
</div>
<div class="section" id="division-lines">
<h3>Division lines<a class="headerlink" href="#division-lines" title="Permalink to this headline">¶</a></h3>
<p>The number of horizontal and vertical division lines can be modified by <code class="docutils literal notranslate"><span class="pre">lv_chart_set_div_line_count(chart,</span> <span class="pre">hdiv_num,</span> <span class="pre">vdiv_num)</span></code>.
The default settings are 3 horizontal and 5 vertical division lines.
If there is a visible border on a side and no padding on that side, the division line would be drawn on top of the border and therefore it won't be drawn.</p>
</div>
<div class="section" id="override-default-start-point-for-series">
<h3>Override default start point for series<a class="headerlink" href="#override-default-start-point-for-series" title="Permalink to this headline">¶</a></h3>
<p>If you want a plot to start from a point other than the default which is <code class="docutils literal notranslate"><span class="pre">point[0]</span></code> of the series, you can set an alternative
index with the function <code class="docutils literal notranslate"><span class="pre">lv_chart_set_x_start_point(chart,</span> <span class="pre">ser,</span> <span class="pre">id)</span></code> where <code class="docutils literal notranslate"><span class="pre">id</span></code> is the new index position to start plotting from.</p>
<p>Note that <code class="docutils literal notranslate"><span class="pre">LV_CHART_UPDATE_MODE_SHIFT</span></code> also changes the <code class="docutils literal notranslate"><span class="pre">start_point</span></code>.</p>
</div>
<div class="section" id="tick-marks-and-labels">
<h3>Tick marks and labels<a class="headerlink" href="#tick-marks-and-labels" title="Permalink to this headline">¶</a></h3>
<p>Ticks and labels can be added to the axis with <code class="docutils literal notranslate"><span class="pre">lv_chart_set_axis_tick(chart,</span> <span class="pre">axis,</span> <span class="pre">major_len,</span> <span class="pre">minor_len,</span> <span class="pre">major_cnt,</span> <span class="pre">minor_cnt,</span> <span class="pre">label_en,</span> <span class="pre">draw_size)</span></code>.</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">axis</span></code> can be <code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_X/PRIMARY_Y/SECONDARY_Y</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">major_len</span></code> is the length of major ticks</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">minor_len</span></code> is the length of minor ticks</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">major_cnt</span></code> is the number of major ticks on the axis</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">minor_cnt</span></code> in the number of minor ticks between two major ticks</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">label_en</span></code> <code class="docutils literal notranslate"><span class="pre">true</span></code>: enable label drawing on major ticks</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">draw_size</span></code> extra size required to draw the tick and labels (start with 20 px and increase if the ticks/labels are clipped)</p></li>
</ul>
</div>
<div class="section" id="zoom">
<h3>Zoom<a class="headerlink" href="#zoom" title="Permalink to this headline">¶</a></h3>
<p>The chart can be zoomed independently in x and y directions with <code class="docutils literal notranslate"><span class="pre">lv_chart_set_zoom_x(chart,</span> <span class="pre">factor)</span></code> and <code class="docutils literal notranslate"><span class="pre">lv_chart_set_zoom_y(chart,</span> <span class="pre">factor)</span></code>.
If <code class="docutils literal notranslate"><span class="pre">factor</span></code> is 256 there is no zoom. 512 means double zoom, etc. Fractional values are also possible but &lt; 256 value is not allowed.</p>
</div>
<div class="section" id="cursor">
<h3>Cursor<a class="headerlink" href="#cursor" title="Permalink to this headline">¶</a></h3>
<p>A cursor can be added with <code class="docutils literal notranslate"><span class="pre">lv_chart_cursor_t</span> <span class="pre">*</span> <span class="pre">c1</span> <span class="pre">=</span> <span class="pre">lv_chart_add_cursor(chart,</span> <span class="pre">color,</span> <span class="pre">dir);</span></code>.
The possible values of <code class="docutils literal notranslate"><span class="pre">dir</span></code>  <code class="docutils literal notranslate"><span class="pre">LV_DIR_NONE/RIGHT/UP/LEFT/DOWN/HOR/VER/ALL</span></code> or their OR-ed values to tell in which direction(s) should the cursor be drawn.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_chart_set_cursor_pos(chart,</span> <span class="pre">cursor,</span> <span class="pre">&amp;point)</span></code> sets the position of the cursor.
<code class="docutils literal notranslate"><span class="pre">pos</span></code> is a pointer to an <code class="docutils literal notranslate"><span class="pre">lv_point_t</span></code> variable. E.g. <code class="docutils literal notranslate"><span class="pre">lv_point_t</span> <span class="pre">point</span> <span class="pre">=</span> <span class="pre">{10,</span> <span class="pre">20};</span></code>. If the chart is scrolled the cursor will remain in the same place.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_chart_get_point_pos_by_id(chart,</span> <span class="pre">series,</span> <span class="pre">id,</span> <span class="pre">&amp;point_out)</span></code> gets the coordinate of a given point. It's useful to place the cursor at a given point.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_chart_set_cursor_point(chart,</span> <span class="pre">cursor,</span> <span class="pre">series,</span> <span class="pre">point_id)</span></code> sticks the cursor at a point. If the point's position changes (new value or scrolling) the cursor will move with the point.</p>
</div>
</div>
<div class="section" id="events">
<h2>Events<a class="headerlink" href="#events" title="Permalink to this headline">¶</a></h2>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_EVENT_VALUE_CHANGED</span></code> Sent when a new point is clicked pressed.  <code class="docutils literal notranslate"><span class="pre">lv_chart_get_pressed_point(chart)</span></code> returns the zero-based index of the pressed point.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_EVENT_DRAW_PART_BEGIN</span></code> and <code class="docutils literal notranslate"><span class="pre">LV_EVENT_DRAW_PART_END</span></code> are sent with the following types:</p>
<ul>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_DRAW_PART_DIV_LINE_INIT</span></code>  Used before/after drawn the div lines to add masks to any extra drawings. The following fields are set:</p>
<ul>
<li><p><code class="docutils literal notranslate"><span class="pre">part</span></code>: <code class="docutils literal notranslate"><span class="pre">LV_PART_MAIN</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">line_dsc</span></code></p></li>
</ul>
</li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_DRAW_PART_DIV_LINE_HOR</span></code>, <code class="docutils literal notranslate"><span class="pre">LV_CHART_DRAW_PART_DIV_LINE_VER</span></code> Used for each horizontal and vertical division lines.</p>
<ul>
<li><p><code class="docutils literal notranslate"><span class="pre">part</span></code>: <code class="docutils literal notranslate"><span class="pre">LV_PART_MAIN</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">id</span></code>: index of the line</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">p1</span></code>, <code class="docutils literal notranslate"><span class="pre">p2</span></code>: points of the line</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">line_dsc</span></code></p></li>
</ul>
</li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_DRAW_PART_LINE_AND_POINT</span></code> Used on line and scatter charts for lines and points.</p>
<ul>
<li><p><code class="docutils literal notranslate"><span class="pre">part</span></code>: <code class="docutils literal notranslate"><span class="pre">LV_PART_ITEMS</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">id</span></code>: index of the point</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">value</span></code>: value of <code class="docutils literal notranslate"><span class="pre">id</span></code>th point</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">p1</span></code>, <code class="docutils literal notranslate"><span class="pre">p2</span></code>: points of the line</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">draw_area</span></code>: area of the point</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">line_dsc</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">rect_dsc</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">sub_part_ptr</span></code>: pointer to the series</p></li>
</ul>
</li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_DRAW_PART_BAR</span></code> Used on bar charts for the rectangles.</p>
<ul>
<li><p><code class="docutils literal notranslate"><span class="pre">part</span></code>: <code class="docutils literal notranslate"><span class="pre">LV_PART_ITEMS</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">id</span></code>: index of the point</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">value</span></code>: value of <code class="docutils literal notranslate"><span class="pre">id</span></code>th point</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">draw_area</span></code>: area of the point</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">rect_dsc</span></code>:</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">sub_part_ptr</span></code>: pointer to the series</p></li>
</ul>
</li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_DRAW_PART_CURSOR</span></code>  Used on cursor lines and points.</p>
<ul>
<li><p><code class="docutils literal notranslate"><span class="pre">part</span></code>: <code class="docutils literal notranslate"><span class="pre">LV_PART_CURSOR</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">p1</span></code>, <code class="docutils literal notranslate"><span class="pre">p2</span></code>: points of the line</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">line_dsc</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">rect_dsc</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">draw_area</span></code>: area of the points</p></li>
</ul>
</li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_CHART_DRAW_PART_TICK_LABEL</span></code>  Used on tick lines and labels.</p>
<ul>
<li><p><code class="docutils literal notranslate"><span class="pre">part</span></code>: <code class="docutils literal notranslate"><span class="pre">LV_PART_TICKS</span></code></p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">id</span></code>: axis</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">value</span></code>: value of the tick</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">text</span></code>: <code class="docutils literal notranslate"><span class="pre">value</span></code> converted to decimal or <code class="docutils literal notranslate"><span class="pre">NULL</span></code> for minor ticks</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">line_dsc</span></code>,</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">label_dsc</span></code>,</p></li>
</ul>
</li>
</ul>
</li>
</ul>
<p>See the events of the <a class="reference internal" href="../obj.html"><span class="doc">Base object</span></a> too.</p>
<p>Learn more about <a class="reference internal" href="../../overview/event.html"><span class="doc">Events</span></a>.</p>
</div>
<div class="section" id="keys">
<h2>Keys<a class="headerlink" href="#keys" title="Permalink to this headline">¶</a></h2>
<p>No <em>Keys</em> are processed by the object type.</p>
<p>Learn more about <a class="reference internal" href="../../overview/indev.html"><span class="doc">Keys</span></a>.</p>
</div>
<div class="section" id="example">
<h2>Example<a class="headerlink" href="#example" title="Permalink to this headline">¶</a></h2>
<div class="section" id="line-chart">
<h3>Line Chart<a class="headerlink" href="#line-chart" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_1&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_1.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="kt">void</span> <span class="nf">lv_example_chart_1</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a chart*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span><span class="p">;</span>
    <span class="n">chart</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>
    <span class="n">lv_chart_set_type</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_TYPE_LINE</span><span class="p">);</span>   <span class="cm">/*Show lines and points too*/</span>

    <span class="cm">/*Add two data series*/</span>
    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser1</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser2</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_GREEN</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_SECONDARY_Y</span><span class="p">);</span>

    <span class="cm">/*Set the next points on &#39;ser1&#39;*/</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">70</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">90</span><span class="p">);</span>

    <span class="cm">/*Directly set points on &#39;ser2&#39;*/</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="mi">90</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="mi">70</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">5</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">6</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">7</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">8</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>
    <span class="n">ser2</span><span class="o">-&gt;</span><span class="n">y_points</span><span class="p">[</span><span class="mi">9</span><span class="p">]</span> <span class="o">=</span> <span class="mi">65</span><span class="p">;</span>

    <span class="n">lv_chart_refresh</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span> <span class="cm">/*Required after direct set*/</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_1.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_1.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="c1"># Create a chart</span>
<span class="n">chart</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">center</span><span class="p">()</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_type</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">TYPE</span><span class="o">.</span><span class="n">LINE</span><span class="p">)</span>   <span class="c1"># Show lines and points too</span>

<span class="c1"># Add two data series</span>
<span class="n">ser1</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>
<span class="n">ser2</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">GREEN</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">SECONDARY_Y</span><span class="p">)</span>
<span class="nb">print</span><span class="p">(</span><span class="n">ser2</span><span class="p">)</span>
<span class="c1"># Set next points on ser1</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">30</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">70</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span><span class="mi">90</span><span class="p">)</span>

<span class="c1"># Directly set points on &#39;ser2&#39;</span>
<span class="n">ser2</span><span class="o">.</span><span class="n">y_points</span> <span class="o">=</span> <span class="p">[</span><span class="mi">90</span><span class="p">,</span> <span class="mi">70</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span> <span class="mi">65</span><span class="p">]</span>
<span class="n">chart</span><span class="o">.</span><span class="n">refresh</span><span class="p">()</span>      <span class="c1">#  Required after direct set</span>

</pre></div>
</div>
</div>
<hr/></div>
<div class="section" id="faded-area-line-chart-with-custom-division-lines">
<h3>Faded area line chart with custom division lines<a class="headerlink" href="#faded-area-line-chart-with-custom-division-lines" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_2&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_2.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_DRAW_COMPLEX &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart1</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser1</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser2</span><span class="p">;</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="cm">/*Add the faded area before the lines are drawn*/</span>
    <span class="n">lv_obj_draw_part_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv_event_get_draw_part_dsc</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">part</span> <span class="o">==</span> <span class="n">LV_PART_ITEMS</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span> <span class="o">||</span> <span class="o">!</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>

        <span class="cm">/*Add a line mask that keeps the area below the line*/</span>
        <span class="n">lv_draw_mask_line_param_t</span> <span class="n">line_mask_param</span><span class="p">;</span>
        <span class="n">lv_draw_mask_line_points_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">line_mask_param</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">,</span>
                                      <span class="n">LV_DRAW_MASK_LINE_SIDE_BOTTOM</span><span class="p">);</span>
        <span class="kt">int16_t</span> <span class="n">line_mask_id</span> <span class="o">=</span> <span class="n">lv_draw_mask_add</span><span class="p">(</span><span class="o">&amp;</span><span class="n">line_mask_param</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>

        <span class="cm">/*Add a fade effect: transparent bottom covering top*/</span>
        <span class="n">lv_coord_t</span> <span class="n">h</span> <span class="o">=</span> <span class="n">lv_obj_get_height</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
        <span class="n">lv_draw_mask_fade_param_t</span> <span class="n">fade_mask_param</span><span class="p">;</span>
        <span class="n">lv_draw_mask_fade_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">fade_mask_param</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">obj</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">,</span> <span class="n">LV_OPA_COVER</span><span class="p">,</span> <span class="n">obj</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">h</span> <span class="o">/</span> <span class="mi">8</span><span class="p">,</span> <span class="n">LV_OPA_TRANSP</span><span class="p">,</span>
                               <span class="n">obj</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">y2</span><span class="p">);</span>
        <span class="kt">int16_t</span> <span class="n">fade_mask_id</span> <span class="o">=</span> <span class="n">lv_draw_mask_add</span><span class="p">(</span><span class="o">&amp;</span><span class="n">fade_mask_param</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>

        <span class="cm">/*Draw a rectangle that will be affected by the mask*/</span>
        <span class="n">lv_draw_rect_dsc_t</span> <span class="n">draw_rect_dsc</span><span class="p">;</span>
        <span class="n">lv_draw_rect_dsc_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">);</span>
        <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="n">LV_OPA_20</span><span class="p">;</span>
        <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">color</span><span class="p">;</span>

        <span class="n">lv_area_t</span> <span class="n">a</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">x</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y1</span> <span class="o">=</span> <span class="n">LV_MIN</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">);</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">obj</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">y2</span><span class="p">;</span>
        <span class="n">lv_draw_rect</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">draw_ctx</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>

        <span class="cm">/*Remove the masks*/</span>
        <span class="n">lv_draw_mask_free_param</span><span class="p">(</span><span class="o">&amp;</span><span class="n">line_mask_param</span><span class="p">);</span>
        <span class="n">lv_draw_mask_free_param</span><span class="p">(</span><span class="o">&amp;</span><span class="n">fade_mask_param</span><span class="p">);</span>
        <span class="n">lv_draw_mask_remove_id</span><span class="p">(</span><span class="n">line_mask_id</span><span class="p">);</span>
        <span class="n">lv_draw_mask_remove_id</span><span class="p">(</span><span class="n">fade_mask_id</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="cm">/*Hook the division lines too*/</span>
    <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">part</span> <span class="o">==</span> <span class="n">LV_PART_MAIN</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span> <span class="o">==</span> <span class="nb">NULL</span> <span class="o">||</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span> <span class="o">==</span> <span class="nb">NULL</span> <span class="o">||</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span> <span class="o">==</span> <span class="nb">NULL</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>

        <span class="cm">/*Vertical line*/</span>
        <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">x</span> <span class="o">==</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">color</span>  <span class="o">=</span> <span class="n">lv_palette_lighten</span><span class="p">(</span><span class="n">LV_PALETTE_GREY</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
            <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">id</span> <span class="o">==</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">width</span>  <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_gap</span>  <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_width</span>  <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">else</span> <span class="p">{</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">width</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_gap</span>  <span class="o">=</span> <span class="mi">6</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_width</span>  <span class="o">=</span> <span class="mi">6</span><span class="p">;</span>
            <span class="p">}</span>
        <span class="p">}</span>
        <span class="cm">/*Horizontal line*/</span>
        <span class="k">else</span> <span class="p">{</span>
            <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">id</span> <span class="o">==</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">width</span>  <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_gap</span>  <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_width</span>  <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">else</span> <span class="p">{</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">width</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_gap</span>  <span class="o">=</span> <span class="mi">6</span><span class="p">;</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">dash_width</span>  <span class="o">=</span> <span class="mi">6</span><span class="p">;</span>
            <span class="p">}</span>

            <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">id</span> <span class="o">==</span> <span class="mi">1</span>  <span class="o">||</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">id</span> <span class="o">==</span> <span class="mi">3</span><span class="p">)</span> <span class="p">{</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">color</span>  <span class="o">=</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_GREEN</span><span class="p">);</span>
            <span class="p">}</span>
            <span class="k">else</span> <span class="p">{</span>
                <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">color</span>  <span class="o">=</span> <span class="n">lv_palette_lighten</span><span class="p">(</span><span class="n">LV_PALETTE_GREY</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">add_data</span><span class="p">(</span><span class="n">lv_timer_t</span> <span class="o">*</span> <span class="n">timer</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">LV_UNUSED</span><span class="p">(</span><span class="n">timer</span><span class="p">);</span>
    <span class="k">static</span> <span class="kt">uint32_t</span> <span class="n">cnt</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">90</span><span class="p">));</span>

    <span class="k">if</span><span class="p">(</span><span class="n">cnt</span> <span class="o">%</span> <span class="mi">4</span> <span class="o">==</span> <span class="mi">0</span><span class="p">)</span> <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">ser2</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">40</span><span class="p">,</span> <span class="mi">60</span><span class="p">));</span>

    <span class="n">cnt</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Add a faded area effect to the line chart and make some division lines ticker</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_chart_2</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a chart1*/</span>
    <span class="n">chart1</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">chart1</span><span class="p">);</span>
    <span class="n">lv_chart_set_type</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">LV_CHART_TYPE_LINE</span><span class="p">);</span>   <span class="cm">/*Show lines and points too*/</span>

    <span class="n">lv_chart_set_div_line_count</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">7</span><span class="p">);</span>

    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_DRAW_PART_BEGIN</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="n">lv_chart_set_update_mode</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">LV_CHART_UPDATE_MODE_CIRCULAR</span><span class="p">);</span>

    <span class="cm">/*Add two data series*/</span>
    <span class="n">ser1</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="n">ser2</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_SECONDARY_Y</span><span class="p">);</span>

    <span class="kt">uint32_t</span> <span class="n">i</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">90</span><span class="p">));</span>
        <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart1</span><span class="p">,</span> <span class="n">ser2</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">30</span><span class="p">,</span> <span class="mi">70</span><span class="p">));</span>
    <span class="p">}</span>

    <span class="n">lv_timer_create</span><span class="p">(</span><span class="n">add_data</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_2.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_2.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="k">def</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">e</span><span class="p">):</span>

    <span class="n">obj</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_target</span><span class="p">()</span>

    <span class="c1"># Add the faded area before the lines are drawn</span>
    <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">obj_draw_part_dsc_t</span><span class="o">.</span><span class="n">__cast__</span><span class="p">(</span><span class="n">e</span><span class="o">.</span><span class="n">get_param</span><span class="p">())</span>
    <span class="k">if</span> <span class="n">dsc</span><span class="o">.</span><span class="n">part</span> <span class="o">!=</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">ITEMS</span><span class="p">:</span>
        <span class="k">return</span>
    <span class="k">if</span> <span class="ow">not</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span> <span class="ow">or</span> <span class="ow">not</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="p">:</span>
        <span class="k">return</span>

    <span class="c1"># Add a line mask that keeps the area below the line</span>
    <span class="n">line_mask_param</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_line_param_t</span><span class="p">()</span>
    <span class="n">line_mask_param</span><span class="o">.</span><span class="n">points_init</span><span class="p">(</span><span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">y</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">DRAW_MASK_LINE_SIDE</span><span class="o">.</span><span class="n">BOTTOM</span><span class="p">)</span>
    <span class="c1"># line_mask_id = line_mask_param.draw_mask_add(None)</span>
    <span class="n">line_mask_id</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_add</span><span class="p">(</span><span class="n">line_mask_param</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
    <span class="c1"># Add a fade effect: transparent bottom covering top</span>
    <span class="n">h</span> <span class="o">=</span> <span class="n">obj</span><span class="o">.</span><span class="n">get_height</span><span class="p">()</span>
    <span class="n">fade_mask_param</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_fade_param_t</span><span class="p">()</span>
    <span class="n">coords</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
    <span class="n">obj</span><span class="o">.</span><span class="n">get_coords</span><span class="p">(</span><span class="n">coords</span><span class="p">)</span>
    <span class="n">fade_mask_param</span><span class="o">.</span><span class="n">init</span><span class="p">(</span><span class="n">coords</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">COVER</span><span class="p">,</span> <span class="n">coords</span><span class="o">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">h</span> <span class="o">//</span> <span class="mi">8</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">TRANSP</span><span class="p">,</span><span class="n">coords</span><span class="o">.</span><span class="n">y2</span><span class="p">)</span>
    <span class="n">fade_mask_id</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_add</span><span class="p">(</span><span class="n">fade_mask_param</span><span class="p">,</span><span class="kc">None</span><span class="p">)</span>

    <span class="c1"># Draw a rectangle that will be affected by the mask</span>
    <span class="n">draw_rect_dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_rect_dsc_t</span><span class="p">()</span>
    <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">init</span><span class="p">()</span>
    <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">_20</span>
    <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">line_dsc</span><span class="o">.</span><span class="n">color</span>

    <span class="n">a</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
    <span class="n">a</span><span class="o">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">x</span>
    <span class="n">a</span><span class="o">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">x</span> <span class="o">-</span> <span class="mi">1</span>
    <span class="n">a</span><span class="o">.</span><span class="n">y1</span> <span class="o">=</span> <span class="nb">min</span><span class="p">(</span><span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">y</span><span class="p">)</span>
    <span class="n">coords</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
    <span class="n">obj</span><span class="o">.</span><span class="n">get_coords</span><span class="p">(</span><span class="n">coords</span><span class="p">)</span>
    <span class="n">a</span><span class="o">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">coords</span><span class="o">.</span><span class="n">y2</span>
    <span class="n">dsc</span><span class="o">.</span><span class="n">draw_ctx</span><span class="o">.</span><span class="n">rect</span><span class="p">(</span><span class="n">draw_rect_dsc</span><span class="p">,</span> <span class="n">a</span><span class="p">)</span>

    <span class="c1"># Remove the masks</span>
    <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_remove_id</span><span class="p">(</span><span class="n">line_mask_id</span><span class="p">)</span>
    <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_remove_id</span><span class="p">(</span><span class="n">fade_mask_id</span><span class="p">)</span>


<span class="k">def</span> <span class="nf">add_data</span><span class="p">(</span><span class="n">timer</span><span class="p">):</span>
    <span class="c1"># LV_UNUSED(timer);</span>
    <span class="n">cnt</span> <span class="o">=</span> <span class="mi">0</span>
    <span class="n">chart1</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">90</span><span class="p">))</span>

    <span class="k">if</span> <span class="n">cnt</span> <span class="o">%</span> <span class="mi">4</span> <span class="o">==</span> <span class="mi">0</span><span class="p">:</span>
        <span class="n">chart1</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser2</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">40</span><span class="p">,</span> <span class="mi">60</span><span class="p">))</span>

    <span class="n">cnt</span> <span class="o">+=</span><span class="mi">1</span>

<span class="c1">#</span>
<span class="c1"># Add a faded area effect to the line chart</span>
<span class="c1">#</span>

<span class="c1"># Create a chart1</span>
<span class="n">chart1</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">chart1</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
<span class="n">chart1</span><span class="o">.</span><span class="n">center</span><span class="p">()</span>
<span class="n">chart1</span><span class="o">.</span><span class="n">set_type</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">TYPE</span><span class="o">.</span><span class="n">LINE</span><span class="p">)</span>    <span class="c1"># Show lines and points too</span>

<span class="n">chart1</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span><span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">DRAW_PART_BEGIN</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
<span class="n">chart1</span><span class="o">.</span><span class="n">set_update_mode</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">UPDATE_MODE</span><span class="o">.</span><span class="n">CIRCULAR</span><span class="p">)</span>

<span class="c1"># Add two data series</span>
<span class="n">ser1</span> <span class="o">=</span> <span class="n">chart1</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>
<span class="n">ser2</span> <span class="o">=</span> <span class="n">chart1</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">BLUE</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">SECONDARY_Y</span><span class="p">)</span>

<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
    <span class="n">chart1</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">90</span><span class="p">))</span>
    <span class="n">chart1</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser2</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">30</span><span class="p">,</span> <span class="mi">70</span><span class="p">))</span>

<span class="n">timer</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">timer_create</span><span class="p">(</span><span class="n">add_data</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
</pre></div>
</div>
</div>
<hr/></div>
<div class="section" id="axis-ticks-and-labels-with-scrolling">
<h3>Axis ticks and labels with scrolling<a class="headerlink" href="#axis-ticks-and-labels-with-scrolling" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_3&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_3.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_draw_part_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv_event_get_draw_part_dsc</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="n">lv_obj_draw_part_check_type</span><span class="p">(</span><span class="n">dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">lv_chart_class</span><span class="p">,</span> <span class="n">LV_CHART_DRAW_PART_TICK_LABEL</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>

    <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">id</span> <span class="o">==</span> <span class="n">LV_CHART_AXIS_PRIMARY_X</span> <span class="o">&amp;&amp;</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">text</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">const</span> <span class="kt">char</span> <span class="o">*</span> <span class="n">month</span><span class="p">[]</span> <span class="o">=</span> <span class="p">{</span><span class="s">&quot;Jan&quot;</span><span class="p">,</span> <span class="s">&quot;Febr&quot;</span><span class="p">,</span> <span class="s">&quot;March&quot;</span><span class="p">,</span> <span class="s">&quot;Apr&quot;</span><span class="p">,</span> <span class="s">&quot;May&quot;</span><span class="p">,</span> <span class="s">&quot;Jun&quot;</span><span class="p">,</span> <span class="s">&quot;July&quot;</span><span class="p">,</span> <span class="s">&quot;Aug&quot;</span><span class="p">,</span> <span class="s">&quot;Sept&quot;</span><span class="p">,</span> <span class="s">&quot;Oct&quot;</span><span class="p">,</span> <span class="s">&quot;Nov&quot;</span><span class="p">,</span> <span class="s">&quot;Dec&quot;</span><span class="p">};</span>
        <span class="n">lv_snprintf</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">text</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">text_length</span><span class="p">,</span> <span class="s">&quot;%s&quot;</span><span class="p">,</span> <span class="n">month</span><span class="p">[</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">value</span><span class="p">]);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Add ticks and labels to the axis and demonstrate scrolling</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_chart_3</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a chart*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span><span class="p">;</span>
    <span class="n">chart</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>
    <span class="n">lv_chart_set_type</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_TYPE_BAR</span><span class="p">);</span>
    <span class="n">lv_chart_set_range</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
    <span class="n">lv_chart_set_range</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_SECONDARY_Y</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">400</span><span class="p">);</span>
    <span class="n">lv_chart_set_point_count</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">12</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_DRAW_PART_BEGIN</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>

    <span class="cm">/*Add ticks and label to every axis*/</span>
    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_X</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">40</span><span class="p">);</span>
    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>
    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_SECONDARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>

    <span class="cm">/*Zoom in a little in X*/</span>
    <span class="n">lv_chart_set_zoom_x</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">800</span><span class="p">);</span>

    <span class="cm">/*Add two data series*/</span>
    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser1</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_lighten</span><span class="p">(</span><span class="n">LV_PALETTE_GREEN</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser2</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_darken</span><span class="p">(</span><span class="n">LV_PALETTE_GREEN</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span>
                                                   <span class="n">LV_CHART_AXIS_SECONDARY_Y</span><span class="p">);</span>

    <span class="cm">/*Set the next points on &#39;ser1&#39;*/</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">31</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">66</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">89</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">63</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">56</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">32</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">35</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">57</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">85</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">22</span><span class="p">);</span>
    <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="mi">58</span><span class="p">);</span>

    <span class="n">lv_coord_t</span> <span class="o">*</span> <span class="n">ser2_array</span> <span class="o">=</span> <span class="n">lv_chart_get_y_array</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser2</span><span class="p">);</span>
    <span class="cm">/*Directly set points on &#39;ser2&#39;*/</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="mi">92</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="mi">71</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="mi">61</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="mi">15</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="o">=</span> <span class="mi">21</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">5</span><span class="p">]</span> <span class="o">=</span> <span class="mi">35</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">6</span><span class="p">]</span> <span class="o">=</span> <span class="mi">35</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">7</span><span class="p">]</span> <span class="o">=</span> <span class="mi">58</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">8</span><span class="p">]</span> <span class="o">=</span> <span class="mi">31</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">9</span><span class="p">]</span> <span class="o">=</span> <span class="mi">53</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">10</span><span class="p">]</span> <span class="o">=</span> <span class="mi">33</span><span class="p">;</span>
    <span class="n">ser2_array</span><span class="p">[</span><span class="mi">11</span><span class="p">]</span> <span class="o">=</span> <span class="mi">73</span><span class="p">;</span>

    <span class="n">lv_chart_refresh</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span> <span class="cm">/*Required after direct set*/</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_3.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_3.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="k">def</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">e</span><span class="p">):</span>

    <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">obj_draw_part_dsc_t</span><span class="o">.</span><span class="n">__cast__</span><span class="p">(</span><span class="n">e</span><span class="o">.</span><span class="n">get_param</span><span class="p">())</span>
    <span class="k">if</span> <span class="n">dsc</span><span class="o">.</span><span class="n">part</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">TICKS</span> <span class="ow">and</span> <span class="n">dsc</span><span class="o">.</span><span class="n">id</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_X</span><span class="p">:</span>
        <span class="n">month</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&quot;Jan&quot;</span><span class="p">,</span> <span class="s2">&quot;Febr&quot;</span><span class="p">,</span> <span class="s2">&quot;March&quot;</span><span class="p">,</span> <span class="s2">&quot;Apr&quot;</span><span class="p">,</span> <span class="s2">&quot;May&quot;</span><span class="p">,</span> <span class="s2">&quot;Jun&quot;</span><span class="p">,</span> <span class="s2">&quot;July&quot;</span><span class="p">,</span> <span class="s2">&quot;Aug&quot;</span><span class="p">,</span> <span class="s2">&quot;Sept&quot;</span><span class="p">,</span> <span class="s2">&quot;Oct&quot;</span><span class="p">,</span> <span class="s2">&quot;Nov&quot;</span><span class="p">,</span> <span class="s2">&quot;Dec&quot;</span><span class="p">]</span>
        <span class="c1"># dsc.text is defined char text[16], I must therefore convert the Python string to a byte_array</span>
        <span class="n">dsc</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="nb">bytes</span><span class="p">(</span><span class="n">month</span><span class="p">[</span><span class="n">dsc</span><span class="o">.</span><span class="n">value</span><span class="p">],</span><span class="s2">&quot;ascii&quot;</span><span class="p">)</span>
<span class="c1">#</span>
<span class="c1"># Add ticks and labels to the axis and demonstrate scrolling</span>
<span class="c1">#</span>

<span class="c1"># Create a chart</span>
<span class="n">chart</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">center</span><span class="p">()</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_type</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">TYPE</span><span class="o">.</span><span class="n">BAR</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">SECONDARY_Y</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">400</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_point_count</span><span class="p">(</span><span class="mi">12</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span><span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">DRAW_PART_BEGIN</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>

<span class="c1"># Add ticks and label to every axis</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_X</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="mi">40</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="mi">50</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">SECONDARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span><span class="kc">True</span><span class="p">,</span> <span class="mi">50</span><span class="p">)</span>

<span class="c1"># Zoom in a little in X</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_zoom_x</span><span class="p">(</span><span class="mi">800</span><span class="p">)</span>

<span class="c1"># Add two data series</span>
<span class="n">ser1</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">palette_lighten</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">GREEN</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>
<span class="n">ser2</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">palette_darken</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">GREEN</span><span class="p">,</span> <span class="mi">2</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">SECONDARY_Y</span><span class="p">)</span>

<span class="c1"># Set the next points on &#39;ser1&#39;</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">31</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">66</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">10</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">89</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">63</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">56</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">32</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">35</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">57</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">85</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">22</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span><span class="n">ser1</span><span class="p">,</span> <span class="mi">58</span><span class="p">)</span>

<span class="c1"># Directly set points on &#39;ser2&#39;</span>
<span class="n">ser2</span><span class="o">.</span><span class="n">y_points</span> <span class="o">=</span> <span class="p">[</span><span class="mi">92</span><span class="p">,</span><span class="mi">71</span><span class="p">,</span><span class="mi">61</span><span class="p">,</span><span class="mi">15</span><span class="p">,</span><span class="mi">21</span><span class="p">,</span><span class="mi">35</span><span class="p">,</span><span class="mi">35</span><span class="p">,</span><span class="mi">58</span><span class="p">,</span><span class="mi">31</span><span class="p">,</span><span class="mi">53</span><span class="p">,</span><span class="mi">33</span><span class="p">,</span><span class="mi">73</span><span class="p">]</span>

<span class="n">chart</span><span class="o">.</span><span class="n">refresh</span><span class="p">()</span>  <span class="c1"># Required after direct set</span>

</pre></div>
</div>
</div>
<hr/></div>
<div class="section" id="show-the-value-of-the-pressed-points">
<h3>Show the value of the pressed points<a class="headerlink" href="#show-the-value-of-the-pressed-points" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_4&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_4.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_event_code_t</span> <span class="n">code</span> <span class="o">=</span> <span class="n">lv_event_get_code</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_invalidate</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_REFR_EXT_DRAW_SIZE</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_coord_t</span> <span class="o">*</span> <span class="n">s</span> <span class="o">=</span> <span class="n">lv_event_get_param</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
        <span class="o">*</span><span class="n">s</span> <span class="o">=</span> <span class="n">LV_MAX</span><span class="p">(</span><span class="o">*</span><span class="n">s</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_DRAW_POST_END</span><span class="p">)</span> <span class="p">{</span>
        <span class="kt">int32_t</span> <span class="n">id</span> <span class="o">=</span> <span class="n">lv_chart_get_pressed_point</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>
        <span class="k">if</span><span class="p">(</span><span class="n">id</span> <span class="o">==</span> <span class="n">LV_CHART_POINT_NONE</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>

        <span class="n">LV_LOG_USER</span><span class="p">(</span><span class="s">&quot;Selected point %d&quot;</span><span class="p">,</span> <span class="p">(</span><span class="kt">int</span><span class="p">)</span><span class="n">id</span><span class="p">);</span>

        <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser</span> <span class="o">=</span> <span class="n">lv_chart_get_series_next</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
        <span class="k">while</span><span class="p">(</span><span class="n">ser</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">lv_point_t</span> <span class="n">p</span><span class="p">;</span>
            <span class="n">lv_chart_get_point_pos_by_id</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser</span><span class="p">,</span> <span class="n">id</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">p</span><span class="p">);</span>

            <span class="n">lv_coord_t</span> <span class="o">*</span> <span class="n">y_array</span> <span class="o">=</span> <span class="n">lv_chart_get_y_array</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser</span><span class="p">);</span>
            <span class="n">lv_coord_t</span> <span class="n">value</span> <span class="o">=</span> <span class="n">y_array</span><span class="p">[</span><span class="n">id</span><span class="p">];</span>

            <span class="kt">char</span> <span class="n">buf</span><span class="p">[</span><span class="mi">16</span><span class="p">];</span>
            <span class="n">lv_snprintf</span><span class="p">(</span><span class="n">buf</span><span class="p">,</span> <span class="k">sizeof</span><span class="p">(</span><span class="n">buf</span><span class="p">),</span> <span class="n">LV_SYMBOL_DUMMY</span><span class="s">&quot;$%d&quot;</span><span class="p">,</span> <span class="n">value</span><span class="p">);</span>

            <span class="n">lv_draw_rect_dsc_t</span> <span class="n">draw_rect_dsc</span><span class="p">;</span>
            <span class="n">lv_draw_rect_dsc_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">);</span>
            <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">lv_color_black</span><span class="p">();</span>
            <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="n">LV_OPA_50</span><span class="p">;</span>
            <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">radius</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>
            <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_img_src</span> <span class="o">=</span> <span class="n">buf</span><span class="p">;</span>
            <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_img_recolor</span> <span class="o">=</span> <span class="n">lv_color_white</span><span class="p">();</span>

            <span class="n">lv_area_t</span> <span class="n">a</span><span class="p">;</span>
            <span class="n">a</span><span class="p">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">chart</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">x1</span> <span class="o">+</span> <span class="n">p</span><span class="p">.</span><span class="n">x</span> <span class="o">-</span> <span class="mi">20</span><span class="p">;</span>
            <span class="n">a</span><span class="p">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">chart</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">x1</span> <span class="o">+</span> <span class="n">p</span><span class="p">.</span><span class="n">x</span> <span class="o">+</span> <span class="mi">20</span><span class="p">;</span>
            <span class="n">a</span><span class="p">.</span><span class="n">y1</span> <span class="o">=</span> <span class="n">chart</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">p</span><span class="p">.</span><span class="n">y</span> <span class="o">-</span> <span class="mi">30</span><span class="p">;</span>
            <span class="n">a</span><span class="p">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">chart</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">p</span><span class="p">.</span><span class="n">y</span> <span class="o">-</span> <span class="mi">10</span><span class="p">;</span>

            <span class="n">lv_draw_ctx_t</span> <span class="o">*</span> <span class="n">draw_ctx</span> <span class="o">=</span> <span class="n">lv_event_get_draw_ctx</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
            <span class="n">lv_draw_rect</span><span class="p">(</span><span class="n">draw_ctx</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>

            <span class="n">ser</span> <span class="o">=</span> <span class="n">lv_chart_get_series_next</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_RELEASED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_invalidate</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Show the value of the pressed points</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_chart_4</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a chart*/</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span><span class="p">;</span>
    <span class="n">chart</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>

    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_ALL</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="n">lv_obj_refresh_ext_draw_size</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>

    <span class="cm">/*Zoom in a little in X*/</span>
    <span class="n">lv_chart_set_zoom_x</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">800</span><span class="p">);</span>

    <span class="cm">/*Add two data series*/</span>
    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser1</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser2</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_GREEN</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="kt">uint32_t</span> <span class="n">i</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser1</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">60</span><span class="p">,</span> <span class="mi">90</span><span class="p">));</span>
        <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser2</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">40</span><span class="p">));</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_4.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_4.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="k">def</span> <span class="nf">event_cb</span><span class="p">(</span><span class="n">e</span><span class="p">):</span>
    <span class="n">code</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_code</span><span class="p">()</span>
    <span class="n">chart</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_target</span><span class="p">()</span>

    <span class="k">if</span> <span class="n">code</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">VALUE_CHANGED</span><span class="p">:</span>
        <span class="n">chart</span><span class="o">.</span><span class="n">invalidate</span><span class="p">()</span>

    <span class="k">if</span> <span class="n">code</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">REFR_EXT_DRAW_SIZE</span><span class="p">:</span>
        <span class="n">e</span><span class="o">.</span><span class="n">set_ext_draw_size</span><span class="p">(</span><span class="mi">20</span><span class="p">)</span>

    <span class="k">elif</span> <span class="n">code</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">DRAW_POST_END</span><span class="p">:</span>
        <span class="nb">id</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">get_pressed_point</span><span class="p">(</span><span class="n">chart</span><span class="p">)</span>
        <span class="k">if</span> <span class="nb">id</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">CHART_POINT</span><span class="o">.</span><span class="n">NONE</span><span class="p">:</span>
            <span class="k">return</span>
        <span class="c1"># print(&quot;Selected point &quot;, id)</span>
        <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="nb">len</span><span class="p">(</span><span class="n">series</span><span class="p">)):</span>
            <span class="n">p</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">point_t</span><span class="p">()</span>
            <span class="n">chart</span><span class="o">.</span><span class="n">get_point_pos_by_id</span><span class="p">(</span><span class="n">series</span><span class="p">[</span><span class="n">i</span><span class="p">],</span> <span class="nb">id</span><span class="p">,</span> <span class="n">p</span><span class="p">)</span>
            <span class="n">value</span> <span class="o">=</span> <span class="n">series_points</span><span class="p">[</span><span class="n">i</span><span class="p">][</span><span class="nb">id</span><span class="p">]</span>
            <span class="n">buf</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">SYMBOL</span><span class="o">.</span><span class="n">DUMMY</span> <span class="o">+</span> <span class="s2">&quot;$&quot;</span> <span class="o">+</span> <span class="nb">str</span><span class="p">(</span><span class="n">value</span><span class="p">)</span>

            <span class="n">draw_rect_dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_rect_dsc_t</span><span class="p">()</span>
            <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">init</span><span class="p">()</span>
            <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">color_black</span><span class="p">()</span>
            <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">_50</span>
            <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">radius</span> <span class="o">=</span> <span class="mi">3</span>
            <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_img_src</span> <span class="o">=</span> <span class="n">buf</span>
            <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_img_recolor</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">color_white</span><span class="p">()</span>

            <span class="n">a</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
            <span class="n">coords</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
            <span class="n">chart</span><span class="o">.</span><span class="n">get_coords</span><span class="p">(</span><span class="n">coords</span><span class="p">)</span>
            <span class="n">a</span><span class="o">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">coords</span><span class="o">.</span><span class="n">x1</span> <span class="o">+</span> <span class="n">p</span><span class="o">.</span><span class="n">x</span> <span class="o">-</span> <span class="mi">20</span>
            <span class="n">a</span><span class="o">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">coords</span><span class="o">.</span><span class="n">x1</span> <span class="o">+</span> <span class="n">p</span><span class="o">.</span><span class="n">x</span> <span class="o">+</span> <span class="mi">20</span>
            <span class="n">a</span><span class="o">.</span><span class="n">y1</span> <span class="o">=</span> <span class="n">coords</span><span class="o">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">p</span><span class="o">.</span><span class="n">y</span> <span class="o">-</span> <span class="mi">30</span>
            <span class="n">a</span><span class="o">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">coords</span><span class="o">.</span><span class="n">y1</span> <span class="o">+</span> <span class="n">p</span><span class="o">.</span><span class="n">y</span> <span class="o">-</span> <span class="mi">10</span>

            <span class="n">clip_area</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="o">.</span><span class="n">__cast__</span><span class="p">(</span><span class="n">e</span><span class="o">.</span><span class="n">get_param</span><span class="p">())</span>
            <span class="n">lv</span><span class="o">.</span><span class="n">draw_rect</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">clip_area</span><span class="p">,</span> <span class="n">draw_rect_dsc</span><span class="p">)</span>

    <span class="k">elif</span> <span class="n">code</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">RELEASED</span><span class="p">:</span>
        <span class="n">chart</span><span class="o">.</span><span class="n">invalidate</span><span class="p">()</span>

<span class="c1">#</span>
<span class="c1"># Add ticks and labels to the axis and demonstrate scrolling</span>
<span class="c1">#</span>

<span class="c1"># Create a chart</span>
<span class="n">chart</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">center</span><span class="p">()</span>

<span class="n">chart</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span><span class="n">event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">ALL</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">refresh_ext_draw_size</span><span class="p">()</span>

<span class="c1"># Zoom in a little in X</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_zoom_x</span><span class="p">(</span><span class="mi">800</span><span class="p">)</span>

<span class="c1"># Add two data series</span>
<span class="n">ser1</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>
<span class="n">ser2</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">GREEN</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>

<span class="n">ser1_p</span> <span class="o">=</span> <span class="p">[]</span>
<span class="n">ser2_p</span> <span class="o">=</span> <span class="p">[]</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
    <span class="n">ser1_p</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">60</span><span class="p">,</span><span class="mi">90</span><span class="p">))</span>
    <span class="n">ser2_p</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">40</span><span class="p">))</span>
<span class="n">ser1</span><span class="o">.</span><span class="n">y_points</span> <span class="o">=</span> <span class="n">ser1_p</span>
<span class="n">ser2</span><span class="o">.</span><span class="n">y_points</span> <span class="o">=</span> <span class="n">ser2_p</span>

<span class="n">series</span> <span class="o">=</span> <span class="p">[</span><span class="n">ser1</span><span class="p">,</span><span class="n">ser2</span><span class="p">]</span>
<span class="n">series_points</span><span class="o">=</span><span class="p">[</span><span class="n">ser1_p</span><span class="p">,</span><span class="n">ser2_p</span><span class="p">]</span>

</pre></div>
</div>
</div>
<hr/></div>
<div class="section" id="display-1000-data-points-with-zooming-and-scrolling">
<h3>Display 1000 data points with zooming and scrolling<a class="headerlink" href="#display-1000-data-points-with-zooming-and-scrolling" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_5&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_5.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_USE_SLIDER &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span><span class="p">;</span>
<span class="cm">/* Source: https://github.com/ankur219/ECG-Arrhythmia-classification/blob/642230149583adfae1e4bd26c6f0e1fd8af2be0e/sample.csv*/</span>
<span class="k">static</span> <span class="k">const</span> <span class="n">lv_coord_t</span> <span class="n">ecg_sample</span><span class="p">[]</span> <span class="o">=</span> <span class="p">{</span>
    <span class="mi">-2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">-15</span><span class="p">,</span> <span class="mi">-39</span><span class="p">,</span> <span class="mi">-63</span><span class="p">,</span> <span class="mi">-71</span><span class="p">,</span> <span class="mi">-68</span><span class="p">,</span> <span class="mi">-67</span><span class="p">,</span> <span class="mi">-69</span><span class="p">,</span> <span class="mi">-84</span><span class="p">,</span> <span class="mi">-95</span><span class="p">,</span> <span class="mi">-104</span><span class="p">,</span> <span class="mi">-107</span><span class="p">,</span> <span class="mi">-108</span><span class="p">,</span> <span class="mi">-107</span><span class="p">,</span> <span class="mi">-107</span><span class="p">,</span> <span class="mi">-107</span><span class="p">,</span> <span class="mi">-107</span><span class="p">,</span> <span class="mi">-114</span><span class="p">,</span> <span class="mi">-118</span><span class="p">,</span> <span class="mi">-117</span><span class="p">,</span>
    <span class="mi">-112</span><span class="p">,</span> <span class="mi">-100</span><span class="p">,</span> <span class="mi">-89</span><span class="p">,</span> <span class="mi">-83</span><span class="p">,</span> <span class="mi">-71</span><span class="p">,</span> <span class="mi">-64</span><span class="p">,</span> <span class="mi">-58</span><span class="p">,</span> <span class="mi">-58</span><span class="p">,</span> <span class="mi">-62</span><span class="p">,</span> <span class="mi">-62</span><span class="p">,</span> <span class="mi">-58</span><span class="p">,</span> <span class="mi">-51</span><span class="p">,</span> <span class="mi">-46</span><span class="p">,</span> <span class="mi">-39</span><span class="p">,</span> <span class="mi">-27</span><span class="p">,</span> <span class="mi">-10</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span>
    <span class="mi">13</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span>
    <span class="mi">39</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">29</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">33</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">33</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">-1</span><span class="p">,</span> <span class="mi">-27</span><span class="p">,</span> <span class="mi">-55</span><span class="p">,</span> <span class="mi">-67</span><span class="p">,</span> <span class="mi">-72</span><span class="p">,</span> <span class="mi">-71</span><span class="p">,</span> <span class="mi">-63</span><span class="p">,</span>
    <span class="mi">-49</span><span class="p">,</span> <span class="mi">-18</span><span class="p">,</span> <span class="mi">35</span><span class="p">,</span> <span class="mi">113</span><span class="p">,</span> <span class="mi">230</span><span class="p">,</span> <span class="mi">369</span><span class="p">,</span> <span class="mi">525</span><span class="p">,</span> <span class="mi">651</span><span class="p">,</span> <span class="mi">722</span><span class="p">,</span> <span class="mi">730</span><span class="p">,</span> <span class="mi">667</span><span class="p">,</span> <span class="mi">563</span><span class="p">,</span> <span class="mi">454</span><span class="p">,</span> <span class="mi">357</span><span class="p">,</span> <span class="mi">305</span><span class="p">,</span> <span class="mi">288</span><span class="p">,</span> <span class="mi">274</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">212</span><span class="p">,</span> <span class="mi">173</span><span class="p">,</span> <span class="mi">143</span><span class="p">,</span> <span class="mi">117</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">39</span><span class="p">,</span>
    <span class="mi">-13</span><span class="p">,</span> <span class="mi">-53</span><span class="p">,</span> <span class="mi">-78</span><span class="p">,</span> <span class="mi">-91</span><span class="p">,</span> <span class="mi">-101</span><span class="p">,</span> <span class="mi">-113</span><span class="p">,</span> <span class="mi">-124</span><span class="p">,</span> <span class="mi">-131</span><span class="p">,</span> <span class="mi">-131</span><span class="p">,</span> <span class="mi">-131</span><span class="p">,</span> <span class="mi">-129</span><span class="p">,</span> <span class="mi">-128</span><span class="p">,</span> <span class="mi">-129</span><span class="p">,</span> <span class="mi">-125</span><span class="p">,</span> <span class="mi">-123</span><span class="p">,</span> <span class="mi">-123</span><span class="p">,</span> <span class="mi">-129</span><span class="p">,</span> <span class="mi">-139</span><span class="p">,</span> <span class="mi">-148</span><span class="p">,</span> <span class="mi">-153</span><span class="p">,</span>
    <span class="mi">-159</span><span class="p">,</span> <span class="mi">-166</span><span class="p">,</span> <span class="mi">-183</span><span class="p">,</span> <span class="mi">-205</span><span class="p">,</span> <span class="mi">-227</span><span class="p">,</span> <span class="mi">-243</span><span class="p">,</span> <span class="mi">-248</span><span class="p">,</span> <span class="mi">-246</span><span class="p">,</span> <span class="mi">-254</span><span class="p">,</span> <span class="mi">-280</span><span class="p">,</span> <span class="mi">-327</span><span class="p">,</span> <span class="mi">-381</span><span class="p">,</span> <span class="mi">-429</span><span class="p">,</span> <span class="mi">-473</span><span class="p">,</span> <span class="mi">-517</span><span class="p">,</span> <span class="mi">-556</span><span class="p">,</span> <span class="mi">-592</span><span class="p">,</span> <span class="mi">-612</span><span class="p">,</span> <span class="mi">-620</span><span class="p">,</span>
    <span class="mi">-620</span><span class="p">,</span> <span class="mi">-614</span><span class="p">,</span> <span class="mi">-604</span><span class="p">,</span> <span class="mi">-591</span><span class="p">,</span> <span class="mi">-574</span><span class="p">,</span> <span class="mi">-540</span><span class="p">,</span> <span class="mi">-497</span><span class="p">,</span> <span class="mi">-441</span><span class="p">,</span> <span class="mi">-389</span><span class="p">,</span> <span class="mi">-358</span><span class="p">,</span> <span class="mi">-336</span><span class="p">,</span> <span class="mi">-313</span><span class="p">,</span> <span class="mi">-284</span><span class="p">,</span> <span class="mi">-222</span><span class="p">,</span> <span class="mi">-167</span><span class="p">,</span> <span class="mi">-114</span><span class="p">,</span> <span class="mi">-70</span><span class="p">,</span> <span class="mi">-47</span><span class="p">,</span> <span class="mi">-28</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span>
    <span class="mi">38</span><span class="p">,</span> <span class="mi">52</span><span class="p">,</span> <span class="mi">58</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">68</span><span class="p">,</span> <span class="mi">77</span><span class="p">,</span> <span class="mi">86</span><span class="p">,</span> <span class="mi">86</span><span class="p">,</span> <span class="mi">80</span><span class="p">,</span> <span class="mi">69</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">70</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">90</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">88</span><span class="p">,</span> <span class="mi">91</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">97</span><span class="p">,</span> <span class="mi">91</span><span class="p">,</span> <span class="mi">83</span><span class="p">,</span> <span class="mi">78</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">88</span><span class="p">,</span> <span class="mi">95</span><span class="p">,</span>
    <span class="mi">96</span><span class="p">,</span> <span class="mi">105</span><span class="p">,</span> <span class="mi">106</span><span class="p">,</span> <span class="mi">110</span><span class="p">,</span> <span class="mi">102</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">98</span><span class="p">,</span> <span class="mi">97</span><span class="p">,</span> <span class="mi">101</span><span class="p">,</span> <span class="mi">98</span><span class="p">,</span> <span class="mi">99</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">107</span><span class="p">,</span> <span class="mi">113</span><span class="p">,</span> <span class="mi">119</span><span class="p">,</span> <span class="mi">115</span><span class="p">,</span> <span class="mi">110</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">64</span><span class="p">,</span> <span class="mi">69</span><span class="p">,</span> <span class="mi">76</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span>
    <span class="mi">78</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">114</span><span class="p">,</span> <span class="mi">113</span><span class="p">,</span> <span class="mi">105</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">84</span><span class="p">,</span> <span class="mi">74</span><span class="p">,</span> <span class="mi">66</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">83</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">61</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span> <span class="mi">74</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">58</span><span class="p">,</span> <span class="mi">61</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span>
    <span class="mi">48</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="mi">46</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span> <span class="mi">62</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span> <span class="mi">49</span><span class="p">,</span> <span class="mi">43</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">59</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">35</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">38</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">46</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span>
    <span class="mi">47</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">52</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">71</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">54</span><span class="p">,</span> <span class="mi">53</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="mi">41</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">-8</span><span class="p">,</span> <span class="mi">-23</span><span class="p">,</span> <span class="mi">-32</span><span class="p">,</span> <span class="mi">-31</span><span class="p">,</span> <span class="mi">-19</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span>
    <span class="mi">24</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">29</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">51</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span> <span class="mi">53</span><span class="p">,</span> <span class="mi">53</span><span class="p">,</span> <span class="mi">54</span><span class="p">,</span> <span class="mi">59</span><span class="p">,</span> <span class="mi">54</span><span class="p">,</span> <span class="mi">49</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">-11</span><span class="p">,</span> <span class="mi">-20</span><span class="p">,</span> <span class="mi">-47</span><span class="p">,</span> <span class="mi">-100</span><span class="p">,</span> <span class="mi">-194</span><span class="p">,</span> <span class="mi">-236</span><span class="p">,</span>
    <span class="mi">-212</span><span class="p">,</span> <span class="mi">-123</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">103</span><span class="p">,</span> <span class="mi">142</span><span class="p">,</span> <span class="mi">147</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">105</span><span class="p">,</span> <span class="mi">98</span><span class="p">,</span> <span class="mi">93</span><span class="p">,</span> <span class="mi">81</span><span class="p">,</span> <span class="mi">61</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span>
    <span class="mi">35</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">-13</span><span class="p">,</span> <span class="mi">-14</span><span class="p">,</span> <span class="mi">-10</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">-1</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span> <span class="mi">-10</span><span class="p">,</span> <span class="mi">-19</span><span class="p">,</span> <span class="mi">-32</span><span class="p">,</span> <span class="mi">-42</span><span class="p">,</span> <span class="mi">-55</span><span class="p">,</span> <span class="mi">-60</span><span class="p">,</span>
    <span class="mi">-68</span><span class="p">,</span> <span class="mi">-77</span><span class="p">,</span> <span class="mi">-86</span><span class="p">,</span> <span class="mi">-101</span><span class="p">,</span> <span class="mi">-110</span><span class="p">,</span> <span class="mi">-117</span><span class="p">,</span> <span class="mi">-115</span><span class="p">,</span> <span class="mi">-104</span><span class="p">,</span> <span class="mi">-92</span><span class="p">,</span> <span class="mi">-84</span><span class="p">,</span> <span class="mi">-85</span><span class="p">,</span> <span class="mi">-84</span><span class="p">,</span> <span class="mi">-73</span><span class="p">,</span> <span class="mi">-65</span><span class="p">,</span> <span class="mi">-52</span><span class="p">,</span> <span class="mi">-50</span><span class="p">,</span> <span class="mi">-45</span><span class="p">,</span> <span class="mi">-35</span><span class="p">,</span> <span class="mi">-20</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span>
    <span class="mi">26</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">33</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">-1</span><span class="p">,</span> <span class="mi">-18</span><span class="p">,</span> <span class="mi">-50</span><span class="p">,</span> <span class="mi">-108</span><span class="p">,</span> <span class="mi">-190</span><span class="p">,</span>
    <span class="mi">-272</span><span class="p">,</span> <span class="mi">-340</span><span class="p">,</span> <span class="mi">-408</span><span class="p">,</span> <span class="mi">-446</span><span class="p">,</span> <span class="mi">-537</span><span class="p">,</span> <span class="mi">-643</span><span class="p">,</span> <span class="mi">-777</span><span class="p">,</span> <span class="mi">-894</span><span class="p">,</span> <span class="mi">-920</span><span class="p">,</span> <span class="mi">-853</span><span class="p">,</span> <span class="mi">-697</span><span class="p">,</span> <span class="mi">-461</span><span class="p">,</span> <span class="mi">-251</span><span class="p">,</span> <span class="mi">-60</span><span class="p">,</span> <span class="mi">58</span><span class="p">,</span> <span class="mi">103</span><span class="p">,</span> <span class="mi">129</span><span class="p">,</span> <span class="mi">139</span><span class="p">,</span> <span class="mi">155</span><span class="p">,</span> <span class="mi">170</span><span class="p">,</span> <span class="mi">173</span><span class="p">,</span>
    <span class="mi">178</span><span class="p">,</span> <span class="mi">185</span><span class="p">,</span> <span class="mi">190</span><span class="p">,</span> <span class="mi">193</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">208</span><span class="p">,</span> <span class="mi">215</span><span class="p">,</span> <span class="mi">225</span><span class="p">,</span> <span class="mi">224</span><span class="p">,</span> <span class="mi">232</span><span class="p">,</span> <span class="mi">234</span><span class="p">,</span> <span class="mi">240</span><span class="p">,</span> <span class="mi">240</span><span class="p">,</span> <span class="mi">236</span><span class="p">,</span> <span class="mi">229</span><span class="p">,</span> <span class="mi">226</span><span class="p">,</span> <span class="mi">224</span><span class="p">,</span> <span class="mi">232</span><span class="p">,</span> <span class="mi">233</span><span class="p">,</span> <span class="mi">232</span><span class="p">,</span> <span class="mi">224</span><span class="p">,</span> <span class="mi">219</span><span class="p">,</span> <span class="mi">219</span><span class="p">,</span>
    <span class="mi">223</span><span class="p">,</span> <span class="mi">231</span><span class="p">,</span> <span class="mi">226</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">219</span><span class="p">,</span> <span class="mi">218</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">233</span><span class="p">,</span> <span class="mi">245</span><span class="p">,</span> <span class="mi">268</span><span class="p">,</span> <span class="mi">286</span><span class="p">,</span> <span class="mi">296</span><span class="p">,</span> <span class="mi">295</span><span class="p">,</span> <span class="mi">283</span><span class="p">,</span> <span class="mi">271</span><span class="p">,</span> <span class="mi">263</span><span class="p">,</span> <span class="mi">252</span><span class="p">,</span> <span class="mi">243</span><span class="p">,</span> <span class="mi">226</span><span class="p">,</span> <span class="mi">210</span><span class="p">,</span> <span class="mi">197</span><span class="p">,</span>
    <span class="mi">186</span><span class="p">,</span> <span class="mi">171</span><span class="p">,</span> <span class="mi">152</span><span class="p">,</span> <span class="mi">133</span><span class="p">,</span> <span class="mi">117</span><span class="p">,</span> <span class="mi">114</span><span class="p">,</span> <span class="mi">110</span><span class="p">,</span> <span class="mi">107</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">80</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">48</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">38</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">-7</span><span class="p">,</span> <span class="mi">-11</span><span class="p">,</span> <span class="mi">-14</span><span class="p">,</span> <span class="mi">-18</span><span class="p">,</span> <span class="mi">-29</span><span class="p">,</span> <span class="mi">-37</span><span class="p">,</span> <span class="mi">-44</span><span class="p">,</span> <span class="mi">-50</span><span class="p">,</span>
    <span class="mi">-58</span><span class="p">,</span> <span class="mi">-63</span><span class="p">,</span> <span class="mi">-61</span><span class="p">,</span> <span class="mi">-52</span><span class="p">,</span> <span class="mi">-50</span><span class="p">,</span> <span class="mi">-48</span><span class="p">,</span> <span class="mi">-61</span><span class="p">,</span> <span class="mi">-59</span><span class="p">,</span> <span class="mi">-58</span><span class="p">,</span> <span class="mi">-54</span><span class="p">,</span> <span class="mi">-47</span><span class="p">,</span> <span class="mi">-52</span><span class="p">,</span> <span class="mi">-62</span><span class="p">,</span> <span class="mi">-61</span><span class="p">,</span> <span class="mi">-64</span><span class="p">,</span> <span class="mi">-54</span><span class="p">,</span> <span class="mi">-52</span><span class="p">,</span> <span class="mi">-59</span><span class="p">,</span> <span class="mi">-69</span><span class="p">,</span> <span class="mi">-76</span><span class="p">,</span> <span class="mi">-76</span><span class="p">,</span> <span class="mi">-69</span><span class="p">,</span> <span class="mi">-67</span><span class="p">,</span>
    <span class="mi">-74</span><span class="p">,</span> <span class="mi">-78</span><span class="p">,</span> <span class="mi">-81</span><span class="p">,</span> <span class="mi">-80</span><span class="p">,</span> <span class="mi">-73</span><span class="p">,</span> <span class="mi">-65</span><span class="p">,</span> <span class="mi">-57</span><span class="p">,</span> <span class="mi">-53</span><span class="p">,</span> <span class="mi">-51</span><span class="p">,</span> <span class="mi">-47</span><span class="p">,</span> <span class="mi">-35</span><span class="p">,</span> <span class="mi">-27</span><span class="p">,</span> <span class="mi">-22</span><span class="p">,</span> <span class="mi">-22</span><span class="p">,</span> <span class="mi">-24</span><span class="p">,</span> <span class="mi">-21</span><span class="p">,</span> <span class="mi">-17</span><span class="p">,</span> <span class="mi">-13</span><span class="p">,</span> <span class="mi">-10</span><span class="p">,</span> <span class="mi">-11</span><span class="p">,</span> <span class="mi">-13</span><span class="p">,</span> <span class="mi">-20</span><span class="p">,</span> <span class="mi">-20</span><span class="p">,</span>
    <span class="mi">-12</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">-1</span><span class="p">,</span> <span class="mi">-12</span><span class="p">,</span> <span class="mi">-16</span><span class="p">,</span> <span class="mi">-13</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span>
    <span class="mi">9</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span>
    <span class="mi">14</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">-1</span><span class="p">,</span> <span class="mi">-16</span><span class="p">,</span> <span class="mi">-18</span><span class="p">,</span> <span class="mi">-16</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span> <span class="mi">-10</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">-8</span><span class="p">,</span>
    <span class="mi">-3</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span> <span class="mi">-10</span><span class="p">,</span> <span class="mi">-19</span><span class="p">,</span> <span class="mi">-20</span><span class="p">,</span> <span class="mi">-16</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">-23</span><span class="p">,</span> <span class="mi">-40</span><span class="p">,</span> <span class="mi">-48</span><span class="p">,</span> <span class="mi">-43</span><span class="p">,</span> <span class="mi">-33</span><span class="p">,</span> <span class="mi">-19</span><span class="p">,</span> <span class="mi">-21</span><span class="p">,</span> <span class="mi">-26</span><span class="p">,</span> <span class="mi">-31</span><span class="p">,</span> <span class="mi">-33</span><span class="p">,</span> <span class="mi">-19</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">-17</span><span class="p">,</span> <span class="mi">-47</span><span class="p">,</span>
    <span class="mi">-63</span><span class="p">,</span> <span class="mi">-67</span><span class="p">,</span> <span class="mi">-59</span><span class="p">,</span> <span class="mi">-52</span><span class="p">,</span> <span class="mi">-51</span><span class="p">,</span> <span class="mi">-50</span><span class="p">,</span> <span class="mi">-49</span><span class="p">,</span> <span class="mi">-42</span><span class="p">,</span> <span class="mi">-26</span><span class="p">,</span> <span class="mi">-21</span><span class="p">,</span> <span class="mi">-15</span><span class="p">,</span> <span class="mi">-20</span><span class="p">,</span> <span class="mi">-23</span><span class="p">,</span> <span class="mi">-22</span><span class="p">,</span> <span class="mi">-19</span><span class="p">,</span> <span class="mi">-12</span><span class="p">,</span> <span class="mi">-8</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span>
    <span class="mi">23</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">-45</span><span class="p">,</span> <span class="mi">-121</span><span class="p">,</span> <span class="mi">-196</span><span class="p">,</span> <span class="mi">-226</span><span class="p">,</span> <span class="mi">-200</span><span class="p">,</span> <span class="mi">-118</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">126</span><span class="p">,</span> <span class="mi">131</span><span class="p">,</span> <span class="mi">114</span><span class="p">,</span> <span class="mi">87</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">29</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">35</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span>
    <span class="mi">25</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">-8</span><span class="p">,</span> <span class="mi">-11</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">38</span><span class="p">,</span> <span class="mi">41</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">-8</span><span class="p">,</span> <span class="mi">-17</span><span class="p">,</span> <span class="mi">-23</span><span class="p">,</span> <span class="mi">-26</span><span class="p">,</span> <span class="mi">-25</span><span class="p">,</span> <span class="mi">-21</span><span class="p">,</span> <span class="mi">-15</span><span class="p">,</span> <span class="mi">-10</span><span class="p">,</span> <span class="mi">-13</span><span class="p">,</span> <span class="mi">-13</span><span class="p">,</span>
    <span class="mi">-19</span><span class="p">,</span> <span class="mi">-22</span><span class="p">,</span> <span class="mi">-29</span><span class="p">,</span> <span class="mi">-40</span><span class="p">,</span> <span class="mi">-48</span><span class="p">,</span> <span class="mi">-48</span><span class="p">,</span> <span class="mi">-54</span><span class="p">,</span> <span class="mi">-55</span><span class="p">,</span> <span class="mi">-66</span><span class="p">,</span> <span class="mi">-82</span><span class="p">,</span> <span class="mi">-85</span><span class="p">,</span> <span class="mi">-90</span><span class="p">,</span> <span class="mi">-92</span><span class="p">,</span> <span class="mi">-98</span><span class="p">,</span> <span class="mi">-114</span><span class="p">,</span> <span class="mi">-119</span><span class="p">,</span> <span class="mi">-124</span><span class="p">,</span> <span class="mi">-129</span><span class="p">,</span> <span class="mi">-132</span><span class="p">,</span> <span class="mi">-146</span><span class="p">,</span> <span class="mi">-146</span><span class="p">,</span> <span class="mi">-138</span><span class="p">,</span>
    <span class="mi">-124</span><span class="p">,</span> <span class="mi">-99</span><span class="p">,</span> <span class="mi">-85</span><span class="p">,</span> <span class="mi">-72</span><span class="p">,</span> <span class="mi">-65</span><span class="p">,</span> <span class="mi">-65</span><span class="p">,</span> <span class="mi">-65</span><span class="p">,</span> <span class="mi">-66</span><span class="p">,</span> <span class="mi">-63</span><span class="p">,</span> <span class="mi">-64</span><span class="p">,</span> <span class="mi">-64</span><span class="p">,</span> <span class="mi">-58</span><span class="p">,</span> <span class="mi">-46</span><span class="p">,</span> <span class="mi">-26</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">-4</span><span class="p">,</span>
    <span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">-7</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">-3</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">-7</span><span class="p">,</span> <span class="mi">-12</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">-6</span><span class="p">,</span> <span class="mi">-9</span><span class="p">,</span> <span class="mi">-8</span><span class="p">,</span> <span class="mi">-7</span><span class="p">,</span> <span class="mi">-5</span><span class="p">,</span>
    <span class="mi">-6</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">-6</span><span class="p">,</span> <span class="mi">-2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">-16</span><span class="p">,</span> <span class="mi">-41</span><span class="p">,</span> <span class="mi">-60</span><span class="p">,</span> <span class="mi">-67</span><span class="p">,</span> <span class="mi">-65</span><span class="p">,</span> <span class="mi">-54</span><span class="p">,</span> <span class="mi">-35</span><span class="p">,</span> <span class="mi">-11</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span>
    <span class="mi">84</span><span class="p">,</span> <span class="mi">175</span><span class="p">,</span> <span class="mi">302</span><span class="p">,</span> <span class="mi">455</span><span class="p">,</span> <span class="mi">603</span><span class="p">,</span> <span class="mi">707</span><span class="p">,</span> <span class="mi">743</span><span class="p">,</span> <span class="mi">714</span><span class="p">,</span> <span class="mi">625</span><span class="p">,</span> <span class="mi">519</span><span class="p">,</span> <span class="mi">414</span><span class="p">,</span> <span class="mi">337</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="mi">281</span><span class="p">,</span> <span class="mi">263</span><span class="p">,</span> <span class="mi">239</span><span class="p">,</span> <span class="mi">197</span><span class="p">,</span> <span class="mi">163</span><span class="p">,</span> <span class="mi">136</span><span class="p">,</span> <span class="mi">109</span><span class="p">,</span> <span class="mi">77</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">-18</span><span class="p">,</span> <span class="mi">-50</span><span class="p">,</span>
    <span class="mi">-66</span><span class="p">,</span> <span class="mi">-74</span><span class="p">,</span> <span class="mi">-79</span><span class="p">,</span> <span class="mi">-92</span><span class="p">,</span> <span class="mi">-107</span><span class="p">,</span> <span class="mi">-117</span><span class="p">,</span> <span class="mi">-127</span><span class="p">,</span> <span class="mi">-129</span><span class="p">,</span> <span class="mi">-135</span><span class="p">,</span> <span class="mi">-139</span><span class="p">,</span> <span class="mi">-141</span><span class="p">,</span> <span class="mi">-155</span><span class="p">,</span> <span class="mi">-159</span><span class="p">,</span> <span class="mi">-167</span><span class="p">,</span> <span class="mi">-171</span><span class="p">,</span> <span class="mi">-169</span><span class="p">,</span> <span class="mi">-174</span><span class="p">,</span> <span class="mi">-175</span><span class="p">,</span> <span class="mi">-178</span><span class="p">,</span> <span class="mi">-191</span><span class="p">,</span>
    <span class="mi">-202</span><span class="p">,</span> <span class="mi">-223</span><span class="p">,</span> <span class="mi">-235</span><span class="p">,</span> <span class="mi">-243</span><span class="p">,</span> <span class="mi">-237</span><span class="p">,</span> <span class="mi">-240</span><span class="p">,</span> <span class="mi">-256</span><span class="p">,</span> <span class="mi">-298</span><span class="p">,</span> <span class="mi">-345</span><span class="p">,</span> <span class="mi">-393</span><span class="p">,</span> <span class="mi">-432</span><span class="p">,</span> <span class="mi">-475</span><span class="p">,</span> <span class="mi">-518</span><span class="p">,</span> <span class="mi">-565</span><span class="p">,</span> <span class="mi">-596</span><span class="p">,</span> <span class="mi">-619</span><span class="p">,</span> <span class="mi">-623</span><span class="p">,</span> <span class="mi">-623</span><span class="p">,</span> <span class="mi">-614</span><span class="p">,</span>
    <span class="mi">-599</span><span class="p">,</span> <span class="mi">-583</span><span class="p">,</span> <span class="mi">-559</span><span class="p">,</span> <span class="mi">-524</span><span class="p">,</span> <span class="mi">-477</span><span class="p">,</span> <span class="mi">-425</span><span class="p">,</span> <span class="mi">-383</span><span class="p">,</span> <span class="mi">-357</span><span class="p">,</span> <span class="mi">-331</span><span class="p">,</span> <span class="mi">-301</span><span class="p">,</span> <span class="mi">-252</span><span class="p">,</span> <span class="mi">-198</span><span class="p">,</span> <span class="mi">-143</span><span class="p">,</span> <span class="mi">-96</span><span class="p">,</span> <span class="mi">-57</span><span class="p">,</span> <span class="mi">-29</span><span class="p">,</span> <span class="mi">-8</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span>
    <span class="mi">70</span><span class="p">,</span> <span class="mi">74</span><span class="p">,</span> <span class="mi">76</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span> <span class="mi">62</span><span class="p">,</span>
<span class="p">};</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">slider_x_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="kt">int32_t</span> <span class="n">v</span> <span class="o">=</span> <span class="n">lv_slider_get_value</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
    <span class="n">lv_chart_set_zoom_x</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>
<span class="p">}</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">slider_y_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="kt">int32_t</span> <span class="n">v</span> <span class="o">=</span> <span class="n">lv_slider_get_value</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
    <span class="n">lv_chart_set_zoom_y</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Display 1000 data points with zooming and scrolling.</span>
<span class="cm"> * See how the chart changes drawing mode (draw only vertical lines) when</span>
<span class="cm"> * the points get too crowded.</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_chart_5</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a chart*/</span>
    <span class="n">chart</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_align</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_ALIGN_CENTER</span><span class="p">,</span> <span class="mi">-30</span><span class="p">,</span> <span class="mi">-30</span><span class="p">);</span>
    <span class="n">lv_chart_set_range</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">-1000</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span>

    <span class="cm">/*Do not display points on the data*/</span>
    <span class="n">lv_obj_set_style_size</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">LV_PART_INDICATOR</span><span class="p">);</span>

    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>

    <span class="kt">uint32_t</span> <span class="n">pcnt</span> <span class="o">=</span> <span class="k">sizeof</span><span class="p">(</span><span class="n">ecg_sample</span><span class="p">)</span> <span class="o">/</span> <span class="k">sizeof</span><span class="p">(</span><span class="n">ecg_sample</span><span class="p">[</span><span class="mi">0</span><span class="p">]);</span>
    <span class="n">lv_chart_set_point_count</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">pcnt</span><span class="p">);</span>
    <span class="n">lv_chart_set_ext_y_array</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser</span><span class="p">,</span> <span class="p">(</span><span class="n">lv_coord_t</span> <span class="o">*</span><span class="p">)</span><span class="n">ecg_sample</span><span class="p">);</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">slider</span><span class="p">;</span>
    <span class="n">slider</span> <span class="o">=</span> <span class="n">lv_slider_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_slider_set_range</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">LV_IMG_ZOOM_NONE</span><span class="p">,</span> <span class="n">LV_IMG_ZOOM_NONE</span> <span class="o">*</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">slider_x_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">chart</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_BOTTOM_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">20</span><span class="p">);</span>

    <span class="n">slider</span> <span class="o">=</span> <span class="n">lv_slider_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_slider_set_range</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">LV_IMG_ZOOM_NONE</span><span class="p">,</span> <span class="n">LV_IMG_ZOOM_NONE</span> <span class="o">*</span> <span class="mi">10</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">slider_y_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">slider</span><span class="p">,</span> <span class="n">chart</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_RIGHT_MID</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_5.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_5.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="c1"># Source: https://github.com/ankur219/ECG-Arrhythmia-classification/blob/642230149583adfae1e4bd26c6f0e1fd8af2be0e/sample.csv</span>
<span class="n">ecg_sample</span> <span class="o">=</span> <span class="p">[</span>
    <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">,</span> <span class="o">-</span><span class="mi">39</span><span class="p">,</span> <span class="o">-</span><span class="mi">63</span><span class="p">,</span> <span class="o">-</span><span class="mi">71</span><span class="p">,</span> <span class="o">-</span><span class="mi">68</span><span class="p">,</span> <span class="o">-</span><span class="mi">67</span><span class="p">,</span> <span class="o">-</span><span class="mi">69</span><span class="p">,</span> <span class="o">-</span><span class="mi">84</span><span class="p">,</span> <span class="o">-</span><span class="mi">95</span><span class="p">,</span> <span class="o">-</span><span class="mi">104</span><span class="p">,</span> <span class="o">-</span><span class="mi">107</span><span class="p">,</span> <span class="o">-</span><span class="mi">108</span><span class="p">,</span> <span class="o">-</span><span class="mi">107</span><span class="p">,</span> <span class="o">-</span><span class="mi">107</span><span class="p">,</span> <span class="o">-</span><span class="mi">107</span><span class="p">,</span> <span class="o">-</span><span class="mi">107</span><span class="p">,</span> <span class="o">-</span><span class="mi">114</span><span class="p">,</span> <span class="o">-</span><span class="mi">118</span><span class="p">,</span> <span class="o">-</span><span class="mi">117</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">112</span><span class="p">,</span> <span class="o">-</span><span class="mi">100</span><span class="p">,</span> <span class="o">-</span><span class="mi">89</span><span class="p">,</span> <span class="o">-</span><span class="mi">83</span><span class="p">,</span> <span class="o">-</span><span class="mi">71</span><span class="p">,</span> <span class="o">-</span><span class="mi">64</span><span class="p">,</span> <span class="o">-</span><span class="mi">58</span><span class="p">,</span> <span class="o">-</span><span class="mi">58</span><span class="p">,</span> <span class="o">-</span><span class="mi">62</span><span class="p">,</span> <span class="o">-</span><span class="mi">62</span><span class="p">,</span> <span class="o">-</span><span class="mi">58</span><span class="p">,</span> <span class="o">-</span><span class="mi">51</span><span class="p">,</span> <span class="o">-</span><span class="mi">46</span><span class="p">,</span> <span class="o">-</span><span class="mi">39</span><span class="p">,</span> <span class="o">-</span><span class="mi">27</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span>
    <span class="mi">13</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span>
    <span class="mi">39</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">29</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">33</span><span class="p">,</span> <span class="mi">37</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">33</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">27</span><span class="p">,</span> <span class="o">-</span><span class="mi">55</span><span class="p">,</span> <span class="o">-</span><span class="mi">67</span><span class="p">,</span> <span class="o">-</span><span class="mi">72</span><span class="p">,</span> <span class="o">-</span><span class="mi">71</span><span class="p">,</span> <span class="o">-</span><span class="mi">63</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">49</span><span class="p">,</span> <span class="o">-</span><span class="mi">18</span><span class="p">,</span> <span class="mi">35</span><span class="p">,</span> <span class="mi">113</span><span class="p">,</span> <span class="mi">230</span><span class="p">,</span> <span class="mi">369</span><span class="p">,</span> <span class="mi">525</span><span class="p">,</span> <span class="mi">651</span><span class="p">,</span> <span class="mi">722</span><span class="p">,</span> <span class="mi">730</span><span class="p">,</span> <span class="mi">667</span><span class="p">,</span> <span class="mi">563</span><span class="p">,</span> <span class="mi">454</span><span class="p">,</span> <span class="mi">357</span><span class="p">,</span> <span class="mi">305</span><span class="p">,</span> <span class="mi">288</span><span class="p">,</span> <span class="mi">274</span><span class="p">,</span> <span class="mi">255</span><span class="p">,</span> <span class="mi">212</span><span class="p">,</span> <span class="mi">173</span><span class="p">,</span> <span class="mi">143</span><span class="p">,</span> <span class="mi">117</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">39</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">13</span><span class="p">,</span> <span class="o">-</span><span class="mi">53</span><span class="p">,</span> <span class="o">-</span><span class="mi">78</span><span class="p">,</span> <span class="o">-</span><span class="mi">91</span><span class="p">,</span> <span class="o">-</span><span class="mi">101</span><span class="p">,</span> <span class="o">-</span><span class="mi">113</span><span class="p">,</span> <span class="o">-</span><span class="mi">124</span><span class="p">,</span> <span class="o">-</span><span class="mi">131</span><span class="p">,</span> <span class="o">-</span><span class="mi">131</span><span class="p">,</span> <span class="o">-</span><span class="mi">131</span><span class="p">,</span> <span class="o">-</span><span class="mi">129</span><span class="p">,</span> <span class="o">-</span><span class="mi">128</span><span class="p">,</span> <span class="o">-</span><span class="mi">129</span><span class="p">,</span> <span class="o">-</span><span class="mi">125</span><span class="p">,</span> <span class="o">-</span><span class="mi">123</span><span class="p">,</span> <span class="o">-</span><span class="mi">123</span><span class="p">,</span> <span class="o">-</span><span class="mi">129</span><span class="p">,</span> <span class="o">-</span><span class="mi">139</span><span class="p">,</span> <span class="o">-</span><span class="mi">148</span><span class="p">,</span> <span class="o">-</span><span class="mi">153</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">159</span><span class="p">,</span> <span class="o">-</span><span class="mi">166</span><span class="p">,</span> <span class="o">-</span><span class="mi">183</span><span class="p">,</span> <span class="o">-</span><span class="mi">205</span><span class="p">,</span> <span class="o">-</span><span class="mi">227</span><span class="p">,</span> <span class="o">-</span><span class="mi">243</span><span class="p">,</span> <span class="o">-</span><span class="mi">248</span><span class="p">,</span> <span class="o">-</span><span class="mi">246</span><span class="p">,</span> <span class="o">-</span><span class="mi">254</span><span class="p">,</span> <span class="o">-</span><span class="mi">280</span><span class="p">,</span> <span class="o">-</span><span class="mi">327</span><span class="p">,</span> <span class="o">-</span><span class="mi">381</span><span class="p">,</span> <span class="o">-</span><span class="mi">429</span><span class="p">,</span> <span class="o">-</span><span class="mi">473</span><span class="p">,</span> <span class="o">-</span><span class="mi">517</span><span class="p">,</span> <span class="o">-</span><span class="mi">556</span><span class="p">,</span> <span class="o">-</span><span class="mi">592</span><span class="p">,</span> <span class="o">-</span><span class="mi">612</span><span class="p">,</span> <span class="o">-</span><span class="mi">620</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">620</span><span class="p">,</span> <span class="o">-</span><span class="mi">614</span><span class="p">,</span> <span class="o">-</span><span class="mi">604</span><span class="p">,</span> <span class="o">-</span><span class="mi">591</span><span class="p">,</span> <span class="o">-</span><span class="mi">574</span><span class="p">,</span> <span class="o">-</span><span class="mi">540</span><span class="p">,</span> <span class="o">-</span><span class="mi">497</span><span class="p">,</span> <span class="o">-</span><span class="mi">441</span><span class="p">,</span> <span class="o">-</span><span class="mi">389</span><span class="p">,</span> <span class="o">-</span><span class="mi">358</span><span class="p">,</span> <span class="o">-</span><span class="mi">336</span><span class="p">,</span> <span class="o">-</span><span class="mi">313</span><span class="p">,</span> <span class="o">-</span><span class="mi">284</span><span class="p">,</span> <span class="o">-</span><span class="mi">222</span><span class="p">,</span> <span class="o">-</span><span class="mi">167</span><span class="p">,</span> <span class="o">-</span><span class="mi">114</span><span class="p">,</span> <span class="o">-</span><span class="mi">70</span><span class="p">,</span> <span class="o">-</span><span class="mi">47</span><span class="p">,</span> <span class="o">-</span><span class="mi">28</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span>
    <span class="mi">38</span><span class="p">,</span> <span class="mi">52</span><span class="p">,</span> <span class="mi">58</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">68</span><span class="p">,</span> <span class="mi">77</span><span class="p">,</span> <span class="mi">86</span><span class="p">,</span> <span class="mi">86</span><span class="p">,</span> <span class="mi">80</span><span class="p">,</span> <span class="mi">69</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">70</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">90</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">88</span><span class="p">,</span> <span class="mi">91</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">97</span><span class="p">,</span> <span class="mi">91</span><span class="p">,</span> <span class="mi">83</span><span class="p">,</span> <span class="mi">78</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">88</span><span class="p">,</span> <span class="mi">95</span><span class="p">,</span>
    <span class="mi">96</span><span class="p">,</span> <span class="mi">105</span><span class="p">,</span> <span class="mi">106</span><span class="p">,</span> <span class="mi">110</span><span class="p">,</span> <span class="mi">102</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">98</span><span class="p">,</span> <span class="mi">97</span><span class="p">,</span> <span class="mi">101</span><span class="p">,</span> <span class="mi">98</span><span class="p">,</span> <span class="mi">99</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">107</span><span class="p">,</span> <span class="mi">113</span><span class="p">,</span> <span class="mi">119</span><span class="p">,</span> <span class="mi">115</span><span class="p">,</span> <span class="mi">110</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">64</span><span class="p">,</span> <span class="mi">69</span><span class="p">,</span> <span class="mi">76</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span>
    <span class="mi">78</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">114</span><span class="p">,</span> <span class="mi">113</span><span class="p">,</span> <span class="mi">105</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">84</span><span class="p">,</span> <span class="mi">74</span><span class="p">,</span> <span class="mi">66</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span> <span class="mi">85</span><span class="p">,</span> <span class="mi">89</span><span class="p">,</span> <span class="mi">83</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">61</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span> <span class="mi">74</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">58</span><span class="p">,</span> <span class="mi">61</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span>
    <span class="mi">48</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="mi">46</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span> <span class="mi">62</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span> <span class="mi">49</span><span class="p">,</span> <span class="mi">43</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">59</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">35</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">38</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">46</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span>
    <span class="mi">47</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">52</span><span class="p">,</span> <span class="mi">67</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">71</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">54</span><span class="p">,</span> <span class="mi">53</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="mi">41</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">8</span><span class="p">,</span> <span class="o">-</span><span class="mi">23</span><span class="p">,</span> <span class="o">-</span><span class="mi">32</span><span class="p">,</span> <span class="o">-</span><span class="mi">31</span><span class="p">,</span> <span class="o">-</span><span class="mi">19</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span>
    <span class="mi">24</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">29</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">51</span><span class="p">,</span> <span class="mi">56</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">57</span><span class="p">,</span> <span class="mi">55</span><span class="p">,</span> <span class="mi">53</span><span class="p">,</span> <span class="mi">53</span><span class="p">,</span> <span class="mi">54</span><span class="p">,</span> <span class="mi">59</span><span class="p">,</span> <span class="mi">54</span><span class="p">,</span> <span class="mi">49</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">11</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">47</span><span class="p">,</span> <span class="o">-</span><span class="mi">100</span><span class="p">,</span> <span class="o">-</span><span class="mi">194</span><span class="p">,</span> <span class="o">-</span><span class="mi">236</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">212</span><span class="p">,</span> <span class="o">-</span><span class="mi">123</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">103</span><span class="p">,</span> <span class="mi">142</span><span class="p">,</span> <span class="mi">147</span><span class="p">,</span> <span class="mi">120</span><span class="p">,</span> <span class="mi">105</span><span class="p">,</span> <span class="mi">98</span><span class="p">,</span> <span class="mi">93</span><span class="p">,</span> <span class="mi">81</span><span class="p">,</span> <span class="mi">61</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span>
    <span class="mi">35</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">13</span><span class="p">,</span> <span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">19</span><span class="p">,</span> <span class="o">-</span><span class="mi">32</span><span class="p">,</span> <span class="o">-</span><span class="mi">42</span><span class="p">,</span> <span class="o">-</span><span class="mi">55</span><span class="p">,</span> <span class="o">-</span><span class="mi">60</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">68</span><span class="p">,</span> <span class="o">-</span><span class="mi">77</span><span class="p">,</span> <span class="o">-</span><span class="mi">86</span><span class="p">,</span> <span class="o">-</span><span class="mi">101</span><span class="p">,</span> <span class="o">-</span><span class="mi">110</span><span class="p">,</span> <span class="o">-</span><span class="mi">117</span><span class="p">,</span> <span class="o">-</span><span class="mi">115</span><span class="p">,</span> <span class="o">-</span><span class="mi">104</span><span class="p">,</span> <span class="o">-</span><span class="mi">92</span><span class="p">,</span> <span class="o">-</span><span class="mi">84</span><span class="p">,</span> <span class="o">-</span><span class="mi">85</span><span class="p">,</span> <span class="o">-</span><span class="mi">84</span><span class="p">,</span> <span class="o">-</span><span class="mi">73</span><span class="p">,</span> <span class="o">-</span><span class="mi">65</span><span class="p">,</span> <span class="o">-</span><span class="mi">52</span><span class="p">,</span> <span class="o">-</span><span class="mi">50</span><span class="p">,</span> <span class="o">-</span><span class="mi">45</span><span class="p">,</span> <span class="o">-</span><span class="mi">35</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span>
    <span class="mi">26</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">33</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">18</span><span class="p">,</span> <span class="o">-</span><span class="mi">50</span><span class="p">,</span> <span class="o">-</span><span class="mi">108</span><span class="p">,</span> <span class="o">-</span><span class="mi">190</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">272</span><span class="p">,</span> <span class="o">-</span><span class="mi">340</span><span class="p">,</span> <span class="o">-</span><span class="mi">408</span><span class="p">,</span> <span class="o">-</span><span class="mi">446</span><span class="p">,</span> <span class="o">-</span><span class="mi">537</span><span class="p">,</span> <span class="o">-</span><span class="mi">643</span><span class="p">,</span> <span class="o">-</span><span class="mi">777</span><span class="p">,</span> <span class="o">-</span><span class="mi">894</span><span class="p">,</span> <span class="o">-</span><span class="mi">920</span><span class="p">,</span> <span class="o">-</span><span class="mi">853</span><span class="p">,</span> <span class="o">-</span><span class="mi">697</span><span class="p">,</span> <span class="o">-</span><span class="mi">461</span><span class="p">,</span> <span class="o">-</span><span class="mi">251</span><span class="p">,</span> <span class="o">-</span><span class="mi">60</span><span class="p">,</span> <span class="mi">58</span><span class="p">,</span> <span class="mi">103</span><span class="p">,</span> <span class="mi">129</span><span class="p">,</span> <span class="mi">139</span><span class="p">,</span> <span class="mi">155</span><span class="p">,</span> <span class="mi">170</span><span class="p">,</span> <span class="mi">173</span><span class="p">,</span>
    <span class="mi">178</span><span class="p">,</span> <span class="mi">185</span><span class="p">,</span> <span class="mi">190</span><span class="p">,</span> <span class="mi">193</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">208</span><span class="p">,</span> <span class="mi">215</span><span class="p">,</span> <span class="mi">225</span><span class="p">,</span> <span class="mi">224</span><span class="p">,</span> <span class="mi">232</span><span class="p">,</span> <span class="mi">234</span><span class="p">,</span> <span class="mi">240</span><span class="p">,</span> <span class="mi">240</span><span class="p">,</span> <span class="mi">236</span><span class="p">,</span> <span class="mi">229</span><span class="p">,</span> <span class="mi">226</span><span class="p">,</span> <span class="mi">224</span><span class="p">,</span> <span class="mi">232</span><span class="p">,</span> <span class="mi">233</span><span class="p">,</span> <span class="mi">232</span><span class="p">,</span> <span class="mi">224</span><span class="p">,</span> <span class="mi">219</span><span class="p">,</span> <span class="mi">219</span><span class="p">,</span>
    <span class="mi">223</span><span class="p">,</span> <span class="mi">231</span><span class="p">,</span> <span class="mi">226</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">219</span><span class="p">,</span> <span class="mi">218</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">223</span><span class="p">,</span> <span class="mi">233</span><span class="p">,</span> <span class="mi">245</span><span class="p">,</span> <span class="mi">268</span><span class="p">,</span> <span class="mi">286</span><span class="p">,</span> <span class="mi">296</span><span class="p">,</span> <span class="mi">295</span><span class="p">,</span> <span class="mi">283</span><span class="p">,</span> <span class="mi">271</span><span class="p">,</span> <span class="mi">263</span><span class="p">,</span> <span class="mi">252</span><span class="p">,</span> <span class="mi">243</span><span class="p">,</span> <span class="mi">226</span><span class="p">,</span> <span class="mi">210</span><span class="p">,</span> <span class="mi">197</span><span class="p">,</span>
    <span class="mi">186</span><span class="p">,</span> <span class="mi">171</span><span class="p">,</span> <span class="mi">152</span><span class="p">,</span> <span class="mi">133</span><span class="p">,</span> <span class="mi">117</span><span class="p">,</span> <span class="mi">114</span><span class="p">,</span> <span class="mi">110</span><span class="p">,</span> <span class="mi">107</span><span class="p">,</span> <span class="mi">96</span><span class="p">,</span> <span class="mi">80</span><span class="p">,</span> <span class="mi">63</span><span class="p">,</span> <span class="mi">48</span><span class="p">,</span> <span class="mi">40</span><span class="p">,</span> <span class="mi">38</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">28</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">7</span><span class="p">,</span> <span class="o">-</span><span class="mi">11</span><span class="p">,</span> <span class="o">-</span><span class="mi">14</span><span class="p">,</span> <span class="o">-</span><span class="mi">18</span><span class="p">,</span> <span class="o">-</span><span class="mi">29</span><span class="p">,</span> <span class="o">-</span><span class="mi">37</span><span class="p">,</span> <span class="o">-</span><span class="mi">44</span><span class="p">,</span> <span class="o">-</span><span class="mi">50</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">58</span><span class="p">,</span> <span class="o">-</span><span class="mi">63</span><span class="p">,</span> <span class="o">-</span><span class="mi">61</span><span class="p">,</span> <span class="o">-</span><span class="mi">52</span><span class="p">,</span> <span class="o">-</span><span class="mi">50</span><span class="p">,</span> <span class="o">-</span><span class="mi">48</span><span class="p">,</span> <span class="o">-</span><span class="mi">61</span><span class="p">,</span> <span class="o">-</span><span class="mi">59</span><span class="p">,</span> <span class="o">-</span><span class="mi">58</span><span class="p">,</span> <span class="o">-</span><span class="mi">54</span><span class="p">,</span> <span class="o">-</span><span class="mi">47</span><span class="p">,</span> <span class="o">-</span><span class="mi">52</span><span class="p">,</span> <span class="o">-</span><span class="mi">62</span><span class="p">,</span> <span class="o">-</span><span class="mi">61</span><span class="p">,</span> <span class="o">-</span><span class="mi">64</span><span class="p">,</span> <span class="o">-</span><span class="mi">54</span><span class="p">,</span> <span class="o">-</span><span class="mi">52</span><span class="p">,</span> <span class="o">-</span><span class="mi">59</span><span class="p">,</span> <span class="o">-</span><span class="mi">69</span><span class="p">,</span> <span class="o">-</span><span class="mi">76</span><span class="p">,</span> <span class="o">-</span><span class="mi">76</span><span class="p">,</span> <span class="o">-</span><span class="mi">69</span><span class="p">,</span> <span class="o">-</span><span class="mi">67</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">74</span><span class="p">,</span> <span class="o">-</span><span class="mi">78</span><span class="p">,</span> <span class="o">-</span><span class="mi">81</span><span class="p">,</span> <span class="o">-</span><span class="mi">80</span><span class="p">,</span> <span class="o">-</span><span class="mi">73</span><span class="p">,</span> <span class="o">-</span><span class="mi">65</span><span class="p">,</span> <span class="o">-</span><span class="mi">57</span><span class="p">,</span> <span class="o">-</span><span class="mi">53</span><span class="p">,</span> <span class="o">-</span><span class="mi">51</span><span class="p">,</span> <span class="o">-</span><span class="mi">47</span><span class="p">,</span> <span class="o">-</span><span class="mi">35</span><span class="p">,</span> <span class="o">-</span><span class="mi">27</span><span class="p">,</span> <span class="o">-</span><span class="mi">22</span><span class="p">,</span> <span class="o">-</span><span class="mi">22</span><span class="p">,</span> <span class="o">-</span><span class="mi">24</span><span class="p">,</span> <span class="o">-</span><span class="mi">21</span><span class="p">,</span> <span class="o">-</span><span class="mi">17</span><span class="p">,</span> <span class="o">-</span><span class="mi">13</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">11</span><span class="p">,</span> <span class="o">-</span><span class="mi">13</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">12</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">12</span><span class="p">,</span> <span class="o">-</span><span class="mi">16</span><span class="p">,</span> <span class="o">-</span><span class="mi">13</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">19</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span>
    <span class="mi">9</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span>
    <span class="mi">14</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="o">-</span><span class="mi">16</span><span class="p">,</span> <span class="o">-</span><span class="mi">18</span><span class="p">,</span> <span class="o">-</span><span class="mi">16</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">8</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">19</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">16</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">23</span><span class="p">,</span> <span class="o">-</span><span class="mi">40</span><span class="p">,</span> <span class="o">-</span><span class="mi">48</span><span class="p">,</span> <span class="o">-</span><span class="mi">43</span><span class="p">,</span> <span class="o">-</span><span class="mi">33</span><span class="p">,</span> <span class="o">-</span><span class="mi">19</span><span class="p">,</span> <span class="o">-</span><span class="mi">21</span><span class="p">,</span> <span class="o">-</span><span class="mi">26</span><span class="p">,</span> <span class="o">-</span><span class="mi">31</span><span class="p">,</span> <span class="o">-</span><span class="mi">33</span><span class="p">,</span> <span class="o">-</span><span class="mi">19</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">17</span><span class="p">,</span> <span class="o">-</span><span class="mi">47</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">63</span><span class="p">,</span> <span class="o">-</span><span class="mi">67</span><span class="p">,</span> <span class="o">-</span><span class="mi">59</span><span class="p">,</span> <span class="o">-</span><span class="mi">52</span><span class="p">,</span> <span class="o">-</span><span class="mi">51</span><span class="p">,</span> <span class="o">-</span><span class="mi">50</span><span class="p">,</span> <span class="o">-</span><span class="mi">49</span><span class="p">,</span> <span class="o">-</span><span class="mi">42</span><span class="p">,</span> <span class="o">-</span><span class="mi">26</span><span class="p">,</span> <span class="o">-</span><span class="mi">21</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">,</span> <span class="o">-</span><span class="mi">20</span><span class="p">,</span> <span class="o">-</span><span class="mi">23</span><span class="p">,</span> <span class="o">-</span><span class="mi">22</span><span class="p">,</span> <span class="o">-</span><span class="mi">19</span><span class="p">,</span> <span class="o">-</span><span class="mi">12</span><span class="p">,</span> <span class="o">-</span><span class="mi">8</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">27</span><span class="p">,</span> <span class="mi">32</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span>
    <span class="mi">23</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">21</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">45</span><span class="p">,</span> <span class="o">-</span><span class="mi">121</span><span class="p">,</span> <span class="o">-</span><span class="mi">196</span><span class="p">,</span> <span class="o">-</span><span class="mi">226</span><span class="p">,</span> <span class="o">-</span><span class="mi">200</span><span class="p">,</span> <span class="o">-</span><span class="mi">118</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="mi">73</span><span class="p">,</span> <span class="mi">126</span><span class="p">,</span> <span class="mi">131</span><span class="p">,</span> <span class="mi">114</span><span class="p">,</span> <span class="mi">87</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">42</span><span class="p">,</span> <span class="mi">29</span><span class="p">,</span> <span class="mi">26</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="mi">35</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span>
    <span class="mi">25</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">8</span><span class="p">,</span> <span class="o">-</span><span class="mi">11</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">38</span><span class="p">,</span> <span class="mi">41</span><span class="p">,</span> <span class="mi">23</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">13</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="o">-</span><span class="mi">8</span><span class="p">,</span> <span class="o">-</span><span class="mi">17</span><span class="p">,</span> <span class="o">-</span><span class="mi">23</span><span class="p">,</span> <span class="o">-</span><span class="mi">26</span><span class="p">,</span> <span class="o">-</span><span class="mi">25</span><span class="p">,</span> <span class="o">-</span><span class="mi">21</span><span class="p">,</span> <span class="o">-</span><span class="mi">15</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">13</span><span class="p">,</span> <span class="o">-</span><span class="mi">13</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">19</span><span class="p">,</span> <span class="o">-</span><span class="mi">22</span><span class="p">,</span> <span class="o">-</span><span class="mi">29</span><span class="p">,</span> <span class="o">-</span><span class="mi">40</span><span class="p">,</span> <span class="o">-</span><span class="mi">48</span><span class="p">,</span> <span class="o">-</span><span class="mi">48</span><span class="p">,</span> <span class="o">-</span><span class="mi">54</span><span class="p">,</span> <span class="o">-</span><span class="mi">55</span><span class="p">,</span> <span class="o">-</span><span class="mi">66</span><span class="p">,</span> <span class="o">-</span><span class="mi">82</span><span class="p">,</span> <span class="o">-</span><span class="mi">85</span><span class="p">,</span> <span class="o">-</span><span class="mi">90</span><span class="p">,</span> <span class="o">-</span><span class="mi">92</span><span class="p">,</span> <span class="o">-</span><span class="mi">98</span><span class="p">,</span> <span class="o">-</span><span class="mi">114</span><span class="p">,</span> <span class="o">-</span><span class="mi">119</span><span class="p">,</span> <span class="o">-</span><span class="mi">124</span><span class="p">,</span> <span class="o">-</span><span class="mi">129</span><span class="p">,</span> <span class="o">-</span><span class="mi">132</span><span class="p">,</span> <span class="o">-</span><span class="mi">146</span><span class="p">,</span> <span class="o">-</span><span class="mi">146</span><span class="p">,</span> <span class="o">-</span><span class="mi">138</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">124</span><span class="p">,</span> <span class="o">-</span><span class="mi">99</span><span class="p">,</span> <span class="o">-</span><span class="mi">85</span><span class="p">,</span> <span class="o">-</span><span class="mi">72</span><span class="p">,</span> <span class="o">-</span><span class="mi">65</span><span class="p">,</span> <span class="o">-</span><span class="mi">65</span><span class="p">,</span> <span class="o">-</span><span class="mi">65</span><span class="p">,</span> <span class="o">-</span><span class="mi">66</span><span class="p">,</span> <span class="o">-</span><span class="mi">63</span><span class="p">,</span> <span class="o">-</span><span class="mi">64</span><span class="p">,</span> <span class="o">-</span><span class="mi">64</span><span class="p">,</span> <span class="o">-</span><span class="mi">58</span><span class="p">,</span> <span class="o">-</span><span class="mi">46</span><span class="p">,</span> <span class="o">-</span><span class="mi">26</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">4</span><span class="p">,</span>
    <span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">7</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">3</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">7</span><span class="p">,</span> <span class="o">-</span><span class="mi">12</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">36</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">17</span><span class="p">,</span> <span class="mi">11</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="o">-</span><span class="mi">9</span><span class="p">,</span> <span class="o">-</span><span class="mi">8</span><span class="p">,</span> <span class="o">-</span><span class="mi">7</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">6</span><span class="p">,</span> <span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">14</span><span class="p">,</span> <span class="mi">24</span><span class="p">,</span> <span class="mi">22</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">4</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">16</span><span class="p">,</span> <span class="mi">25</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="o">-</span><span class="mi">16</span><span class="p">,</span> <span class="o">-</span><span class="mi">41</span><span class="p">,</span> <span class="o">-</span><span class="mi">60</span><span class="p">,</span> <span class="o">-</span><span class="mi">67</span><span class="p">,</span> <span class="o">-</span><span class="mi">65</span><span class="p">,</span> <span class="o">-</span><span class="mi">54</span><span class="p">,</span> <span class="o">-</span><span class="mi">35</span><span class="p">,</span> <span class="o">-</span><span class="mi">11</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span>
    <span class="mi">84</span><span class="p">,</span> <span class="mi">175</span><span class="p">,</span> <span class="mi">302</span><span class="p">,</span> <span class="mi">455</span><span class="p">,</span> <span class="mi">603</span><span class="p">,</span> <span class="mi">707</span><span class="p">,</span> <span class="mi">743</span><span class="p">,</span> <span class="mi">714</span><span class="p">,</span> <span class="mi">625</span><span class="p">,</span> <span class="mi">519</span><span class="p">,</span> <span class="mi">414</span><span class="p">,</span> <span class="mi">337</span><span class="p">,</span> <span class="mi">300</span><span class="p">,</span> <span class="mi">281</span><span class="p">,</span> <span class="mi">263</span><span class="p">,</span> <span class="mi">239</span><span class="p">,</span> <span class="mi">197</span><span class="p">,</span> <span class="mi">163</span><span class="p">,</span> <span class="mi">136</span><span class="p">,</span> <span class="mi">109</span><span class="p">,</span> <span class="mi">77</span><span class="p">,</span> <span class="mi">34</span><span class="p">,</span> <span class="o">-</span><span class="mi">18</span><span class="p">,</span> <span class="o">-</span><span class="mi">50</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">66</span><span class="p">,</span> <span class="o">-</span><span class="mi">74</span><span class="p">,</span> <span class="o">-</span><span class="mi">79</span><span class="p">,</span> <span class="o">-</span><span class="mi">92</span><span class="p">,</span> <span class="o">-</span><span class="mi">107</span><span class="p">,</span> <span class="o">-</span><span class="mi">117</span><span class="p">,</span> <span class="o">-</span><span class="mi">127</span><span class="p">,</span> <span class="o">-</span><span class="mi">129</span><span class="p">,</span> <span class="o">-</span><span class="mi">135</span><span class="p">,</span> <span class="o">-</span><span class="mi">139</span><span class="p">,</span> <span class="o">-</span><span class="mi">141</span><span class="p">,</span> <span class="o">-</span><span class="mi">155</span><span class="p">,</span> <span class="o">-</span><span class="mi">159</span><span class="p">,</span> <span class="o">-</span><span class="mi">167</span><span class="p">,</span> <span class="o">-</span><span class="mi">171</span><span class="p">,</span> <span class="o">-</span><span class="mi">169</span><span class="p">,</span> <span class="o">-</span><span class="mi">174</span><span class="p">,</span> <span class="o">-</span><span class="mi">175</span><span class="p">,</span> <span class="o">-</span><span class="mi">178</span><span class="p">,</span> <span class="o">-</span><span class="mi">191</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">202</span><span class="p">,</span> <span class="o">-</span><span class="mi">223</span><span class="p">,</span> <span class="o">-</span><span class="mi">235</span><span class="p">,</span> <span class="o">-</span><span class="mi">243</span><span class="p">,</span> <span class="o">-</span><span class="mi">237</span><span class="p">,</span> <span class="o">-</span><span class="mi">240</span><span class="p">,</span> <span class="o">-</span><span class="mi">256</span><span class="p">,</span> <span class="o">-</span><span class="mi">298</span><span class="p">,</span> <span class="o">-</span><span class="mi">345</span><span class="p">,</span> <span class="o">-</span><span class="mi">393</span><span class="p">,</span> <span class="o">-</span><span class="mi">432</span><span class="p">,</span> <span class="o">-</span><span class="mi">475</span><span class="p">,</span> <span class="o">-</span><span class="mi">518</span><span class="p">,</span> <span class="o">-</span><span class="mi">565</span><span class="p">,</span> <span class="o">-</span><span class="mi">596</span><span class="p">,</span> <span class="o">-</span><span class="mi">619</span><span class="p">,</span> <span class="o">-</span><span class="mi">623</span><span class="p">,</span> <span class="o">-</span><span class="mi">623</span><span class="p">,</span> <span class="o">-</span><span class="mi">614</span><span class="p">,</span>
    <span class="o">-</span><span class="mi">599</span><span class="p">,</span> <span class="o">-</span><span class="mi">583</span><span class="p">,</span> <span class="o">-</span><span class="mi">559</span><span class="p">,</span> <span class="o">-</span><span class="mi">524</span><span class="p">,</span> <span class="o">-</span><span class="mi">477</span><span class="p">,</span> <span class="o">-</span><span class="mi">425</span><span class="p">,</span> <span class="o">-</span><span class="mi">383</span><span class="p">,</span> <span class="o">-</span><span class="mi">357</span><span class="p">,</span> <span class="o">-</span><span class="mi">331</span><span class="p">,</span> <span class="o">-</span><span class="mi">301</span><span class="p">,</span> <span class="o">-</span><span class="mi">252</span><span class="p">,</span> <span class="o">-</span><span class="mi">198</span><span class="p">,</span> <span class="o">-</span><span class="mi">143</span><span class="p">,</span> <span class="o">-</span><span class="mi">96</span><span class="p">,</span> <span class="o">-</span><span class="mi">57</span><span class="p">,</span> <span class="o">-</span><span class="mi">29</span><span class="p">,</span> <span class="o">-</span><span class="mi">8</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">31</span><span class="p">,</span> <span class="mi">45</span><span class="p">,</span> <span class="mi">60</span><span class="p">,</span> <span class="mi">65</span><span class="p">,</span>
    <span class="mi">70</span><span class="p">,</span> <span class="mi">74</span><span class="p">,</span> <span class="mi">76</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span> <span class="mi">82</span><span class="p">,</span> <span class="mi">79</span><span class="p">,</span> <span class="mi">75</span><span class="p">,</span> <span class="mi">62</span><span class="p">,</span>
<span class="p">]</span>

<span class="k">def</span> <span class="nf">slider_x_event_cb</span><span class="p">(</span><span class="n">e</span><span class="p">):</span>

    <span class="n">slider</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_target</span><span class="p">()</span>
    <span class="n">v</span> <span class="o">=</span> <span class="n">slider</span><span class="o">.</span><span class="n">get_value</span><span class="p">()</span>
    <span class="n">chart</span><span class="o">.</span><span class="n">set_zoom_x</span><span class="p">(</span><span class="n">v</span><span class="p">)</span>

<span class="k">def</span> <span class="nf">slider_y_event_cb</span><span class="p">(</span><span class="n">e</span><span class="p">):</span>

    <span class="n">slider</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_target</span><span class="p">()</span>
    <span class="n">v</span> <span class="o">=</span> <span class="n">slider</span><span class="o">.</span><span class="n">get_value</span><span class="p">()</span>
    <span class="n">chart</span><span class="o">.</span><span class="n">set_zoom_y</span><span class="p">(</span><span class="n">v</span><span class="p">)</span>


<span class="c1">#</span>
<span class="c1"># Display 1000 data points with zooming and scrolling.</span>
<span class="c1"># See how the chart changes drawing mode (draw only vertical lines) when</span>
<span class="c1"># the points get too crowded.</span>

<span class="c1"># Create a chart</span>
<span class="n">chart</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">align</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">CENTER</span><span class="p">,</span> <span class="o">-</span><span class="mi">30</span><span class="p">,</span> <span class="o">-</span><span class="mi">30</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span> <span class="o">-</span><span class="mi">1000</span><span class="p">,</span> <span class="mi">1000</span><span class="p">)</span>

<span class="c1"># Do not display points on the data</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_style_size</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">INDICATOR</span><span class="p">)</span>

<span class="n">ser</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>

<span class="n">pcnt</span> <span class="o">=</span> <span class="nb">len</span><span class="p">(</span><span class="n">ecg_sample</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_point_count</span><span class="p">(</span><span class="n">pcnt</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_ext_y_array</span><span class="p">(</span><span class="n">ser</span><span class="p">,</span> <span class="n">ecg_sample</span><span class="p">)</span>

<span class="n">slider</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">slider</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">slider</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">IMG_ZOOM</span><span class="o">.</span><span class="n">NONE</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">IMG_ZOOM</span><span class="o">.</span><span class="n">NONE</span> <span class="o">*</span> <span class="mi">10</span><span class="p">)</span>
<span class="n">slider</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span><span class="n">slider_x_event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">VALUE_CHANGED</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
<span class="n">slider</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span><span class="mi">10</span><span class="p">)</span>
<span class="n">slider</span><span class="o">.</span><span class="n">align_to</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">OUT_BOTTOM_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">20</span><span class="p">)</span>

<span class="n">slider</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">slider</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">slider</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">IMG_ZOOM</span><span class="o">.</span><span class="n">NONE</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">IMG_ZOOM</span><span class="o">.</span><span class="n">NONE</span> <span class="o">*</span> <span class="mi">10</span><span class="p">)</span>
<span class="n">slider</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span><span class="n">slider_y_event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">VALUE_CHANGED</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
<span class="n">slider</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
<span class="n">slider</span><span class="o">.</span><span class="n">align_to</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">OUT_RIGHT_MID</span><span class="p">,</span> <span class="mi">20</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>

</pre></div>
</div>
</div>
<hr/></div>
<div class="section" id="show-cursor-on-the-clicked-point">
<h3>Show cursor on the clicked point<a class="headerlink" href="#show-cursor-on-the-clicked-point" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_6&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_6.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser</span><span class="p">;</span>
<span class="k">static</span> <span class="n">lv_chart_cursor_t</span> <span class="o">*</span> <span class="n">cursor</span><span class="p">;</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="k">static</span> <span class="kt">int32_t</span> <span class="n">last_id</span> <span class="o">=</span> <span class="mi">-1</span><span class="p">;</span>
    <span class="n">lv_event_code_t</span> <span class="n">code</span> <span class="o">=</span> <span class="n">lv_event_get_code</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_VALUE_CHANGED</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">last_id</span> <span class="o">=</span> <span class="n">lv_chart_get_pressed_point</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
        <span class="k">if</span><span class="p">(</span><span class="n">last_id</span> <span class="o">!=</span> <span class="n">LV_CHART_POINT_NONE</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">lv_chart_set_cursor_point</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">cursor</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">,</span> <span class="n">last_id</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="n">code</span> <span class="o">==</span> <span class="n">LV_EVENT_DRAW_PART_END</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_draw_part_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv_event_get_draw_part_dsc</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
        <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="n">lv_obj_draw_part_check_type</span><span class="p">(</span><span class="n">dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">lv_chart_class</span><span class="p">,</span> <span class="n">LV_CHART_DRAW_PART_CURSOR</span><span class="p">))</span> <span class="k">return</span><span class="p">;</span>
        <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span> <span class="o">==</span> <span class="nb">NULL</span> <span class="o">||</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span> <span class="o">==</span> <span class="nb">NULL</span> <span class="o">||</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">y</span> <span class="o">!=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">y</span> <span class="o">||</span> <span class="n">last_id</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>

        <span class="n">lv_coord_t</span> <span class="o">*</span> <span class="n">data_array</span> <span class="o">=</span> <span class="n">lv_chart_get_y_array</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser</span><span class="p">);</span>
        <span class="n">lv_coord_t</span> <span class="n">v</span> <span class="o">=</span> <span class="n">data_array</span><span class="p">[</span><span class="n">last_id</span><span class="p">];</span>
        <span class="kt">char</span> <span class="n">buf</span><span class="p">[</span><span class="mi">16</span><span class="p">];</span>
        <span class="n">lv_snprintf</span><span class="p">(</span><span class="n">buf</span><span class="p">,</span> <span class="k">sizeof</span><span class="p">(</span><span class="n">buf</span><span class="p">),</span> <span class="s">&quot;%d&quot;</span><span class="p">,</span> <span class="n">v</span><span class="p">);</span>

        <span class="n">lv_point_t</span> <span class="n">size</span><span class="p">;</span>
        <span class="n">lv_txt_get_size</span><span class="p">(</span><span class="o">&amp;</span><span class="n">size</span><span class="p">,</span> <span class="n">buf</span><span class="p">,</span> <span class="n">LV_FONT_DEFAULT</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">LV_COORD_MAX</span><span class="p">,</span> <span class="n">LV_TEXT_FLAG_NONE</span><span class="p">);</span>

        <span class="n">lv_area_t</span> <span class="n">a</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">y</span> <span class="o">-</span> <span class="mi">5</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y1</span> <span class="o">=</span> <span class="n">a</span><span class="p">.</span><span class="n">y2</span> <span class="o">-</span> <span class="n">size</span><span class="p">.</span><span class="n">y</span> <span class="o">-</span> <span class="mi">10</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">x</span> <span class="o">+</span> <span class="mi">10</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">a</span><span class="p">.</span><span class="n">x1</span> <span class="o">+</span> <span class="n">size</span><span class="p">.</span><span class="n">x</span> <span class="o">+</span> <span class="mi">10</span><span class="p">;</span>

        <span class="n">lv_draw_rect_dsc_t</span> <span class="n">draw_rect_dsc</span><span class="p">;</span>
        <span class="n">lv_draw_rect_dsc_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">);</span>
        <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">);</span>
        <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">radius</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span>

        <span class="n">lv_draw_rect</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">draw_ctx</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>

        <span class="n">lv_draw_label_dsc_t</span> <span class="n">draw_label_dsc</span><span class="p">;</span>
        <span class="n">lv_draw_label_dsc_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">draw_label_dsc</span><span class="p">);</span>
        <span class="n">draw_label_dsc</span><span class="p">.</span><span class="n">color</span> <span class="o">=</span> <span class="n">lv_color_white</span><span class="p">();</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x1</span> <span class="o">+=</span> <span class="mi">5</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x2</span> <span class="o">-=</span> <span class="mi">5</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y1</span> <span class="o">+=</span> <span class="mi">5</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y2</span> <span class="o">-=</span> <span class="mi">5</span><span class="p">;</span>
        <span class="n">lv_draw_label</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">draw_ctx</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">draw_label_dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">a</span><span class="p">,</span> <span class="n">buf</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Show cursor on the clicked point</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_chart_6</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">chart</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_align</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_ALIGN_CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">-10</span><span class="p">);</span>

    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">40</span><span class="p">);</span>
    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_X</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span>

    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_ALL</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="n">lv_obj_refresh_ext_draw_size</span><span class="p">(</span><span class="n">chart</span><span class="p">);</span>

    <span class="n">cursor</span> <span class="o">=</span> <span class="n">lv_chart_add_cursor</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">),</span> <span class="n">LV_DIR_LEFT</span> <span class="o">|</span> <span class="n">LV_DIR_BOTTOM</span><span class="p">);</span>

    <span class="n">ser</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="kt">uint32_t</span> <span class="n">i</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">90</span><span class="p">));</span>
    <span class="p">}</span>

    <span class="n">lv_chart_set_zoom_x</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">500</span><span class="p">);</span>

    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">label</span> <span class="o">=</span> <span class="n">lv_label_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_label_set_text</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="s">&quot;Click on a point&quot;</span><span class="p">);</span>
    <span class="n">lv_obj_align_to</span><span class="p">(</span><span class="n">label</span><span class="p">,</span> <span class="n">chart</span><span class="p">,</span> <span class="n">LV_ALIGN_OUT_TOP_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">-5</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_6.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_6.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="k">class</span> <span class="nc">ExampleChart_6</span><span class="p">():</span>

    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">last_id</span> <span class="o">=</span> <span class="o">-</span><span class="mi">1</span>
        <span class="c1">#</span>
        <span class="c1"># Show cursor on the clicked point</span>
        <span class="c1">#</span>

        <span class="n">chart</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
        <span class="n">chart</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
        <span class="n">chart</span><span class="o">.</span><span class="n">align</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">10</span><span class="p">)</span>

        <span class="n">chart</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="mi">40</span><span class="p">)</span>
        <span class="n">chart</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_X</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>

        <span class="n">chart</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">ALL</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
        <span class="n">chart</span><span class="o">.</span><span class="n">refresh_ext_draw_size</span><span class="p">()</span>

        <span class="bp">self</span><span class="o">.</span><span class="n">cursor</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_cursor</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">BLUE</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">DIR</span><span class="o">.</span><span class="n">LEFT</span> <span class="o">|</span> <span class="n">lv</span><span class="o">.</span><span class="n">DIR</span><span class="o">.</span><span class="n">BOTTOM</span><span class="p">)</span>

        <span class="bp">self</span><span class="o">.</span><span class="n">ser</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>

        <span class="bp">self</span><span class="o">.</span><span class="n">ser_p</span> <span class="o">=</span> <span class="p">[]</span>
        <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
            <span class="bp">self</span><span class="o">.</span><span class="n">ser_p</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span><span class="mi">90</span><span class="p">))</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">ser</span><span class="o">.</span><span class="n">y_points</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">ser_p</span>

        <span class="n">newser</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">get_series_next</span><span class="p">(</span><span class="kc">None</span><span class="p">)</span>
        <span class="c1"># print(&quot;length of data points: &quot;,len(newser.points))</span>
        <span class="n">chart</span><span class="o">.</span><span class="n">set_zoom_x</span><span class="p">(</span><span class="mi">500</span><span class="p">)</span>

        <span class="n">label</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">label</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
        <span class="n">label</span><span class="o">.</span><span class="n">set_text</span><span class="p">(</span><span class="s2">&quot;Click on a point&quot;</span><span class="p">)</span>
        <span class="n">label</span><span class="o">.</span><span class="n">align_to</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">OUT_TOP_MID</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="o">-</span><span class="mi">5</span><span class="p">)</span>


    <span class="k">def</span> <span class="nf">event_cb</span><span class="p">(</span><span class="bp">self</span><span class="p">,</span><span class="n">e</span><span class="p">):</span>

        <span class="n">code</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_code</span><span class="p">()</span>
        <span class="n">chart</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_target</span><span class="p">()</span>

        <span class="k">if</span> <span class="n">code</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">VALUE_CHANGED</span><span class="p">:</span>
            <span class="c1"># print(&quot;last_id: &quot;,self.last_id)</span>
            <span class="bp">self</span><span class="o">.</span><span class="n">last_id</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">get_pressed_point</span><span class="p">()</span>
            <span class="k">if</span> <span class="bp">self</span><span class="o">.</span><span class="n">last_id</span> <span class="o">!=</span> <span class="n">lv</span><span class="o">.</span><span class="n">CHART_POINT</span><span class="o">.</span><span class="n">NONE</span><span class="p">:</span>
                <span class="n">p</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">point_t</span><span class="p">()</span>
                <span class="n">chart</span><span class="o">.</span><span class="n">get_point_pos_by_id</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">ser</span><span class="p">,</span> <span class="bp">self</span><span class="o">.</span><span class="n">last_id</span><span class="p">,</span> <span class="n">p</span><span class="p">)</span>
                <span class="n">chart</span><span class="o">.</span><span class="n">set_cursor_point</span><span class="p">(</span><span class="bp">self</span><span class="o">.</span><span class="n">cursor</span><span class="p">,</span> <span class="kc">None</span><span class="p">,</span> <span class="bp">self</span><span class="o">.</span><span class="n">last_id</span><span class="p">)</span>

        <span class="k">elif</span> <span class="n">code</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">DRAW_PART_END</span><span class="p">:</span>
            <span class="c1"># print(&quot;EVENT.DRAW_PART_END&quot;)</span>
            <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">obj_draw_part_dsc_t</span><span class="o">.</span><span class="n">__cast__</span><span class="p">(</span><span class="n">e</span><span class="o">.</span><span class="n">get_param</span><span class="p">())</span>
            <span class="c1"># if dsc.p1 and dsc.p2:</span>
                <span class="c1"># print(&quot;p1, p2&quot;, dsc.p1,dsc.p2)</span>
                <span class="c1"># print(&quot;p1.y, p2.y&quot;, dsc.p1.y, dsc.p2.y)</span>
                <span class="c1"># print(&quot;last_id: &quot;,self.last_id)</span>
            <span class="k">if</span> <span class="n">dsc</span><span class="o">.</span><span class="n">part</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">CURSOR</span> <span class="ow">and</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span> <span class="ow">and</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span> <span class="ow">and</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span> <span class="o">==</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">y</span> <span class="ow">and</span> <span class="bp">self</span><span class="o">.</span><span class="n">last_id</span> <span class="o">&gt;=</span> <span class="mi">0</span><span class="p">:</span>

                <span class="n">v</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">ser_p</span><span class="p">[</span><span class="bp">self</span><span class="o">.</span><span class="n">last_id</span><span class="p">]</span>

                <span class="c1"># print(&quot;value: &quot;,v)</span>
                <span class="n">value_txt</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">v</span><span class="p">)</span>
                <span class="n">size</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">point_t</span><span class="p">()</span>
                <span class="n">lv</span><span class="o">.</span><span class="n">txt_get_size</span><span class="p">(</span><span class="n">size</span><span class="p">,</span> <span class="n">value_txt</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">font_default</span><span class="p">(),</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">COORD</span><span class="o">.</span><span class="n">MAX</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">TEXT_FLAG</span><span class="o">.</span><span class="n">NONE</span><span class="p">)</span>

                <span class="n">a</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
                <span class="n">a</span><span class="o">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span> <span class="o">-</span> <span class="mi">5</span>
                <span class="n">a</span><span class="o">.</span><span class="n">y1</span> <span class="o">=</span> <span class="n">a</span><span class="o">.</span><span class="n">y2</span> <span class="o">-</span> <span class="n">size</span><span class="o">.</span><span class="n">y</span> <span class="o">-</span> <span class="mi">10</span>
                <span class="n">a</span><span class="o">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">x</span> <span class="o">+</span> <span class="mi">10</span>
                <span class="n">a</span><span class="o">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">a</span><span class="o">.</span><span class="n">x1</span> <span class="o">+</span> <span class="n">size</span><span class="o">.</span><span class="n">x</span> <span class="o">+</span> <span class="mi">10</span>

                <span class="n">draw_rect_dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_rect_dsc_t</span><span class="p">()</span>
                <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">init</span><span class="p">()</span>
                <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">BLUE</span><span class="p">)</span>
                <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">radius</span> <span class="o">=</span> <span class="mi">3</span>

                <span class="n">lv</span><span class="o">.</span><span class="n">draw_rect</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">clip_area</span><span class="p">,</span> <span class="n">draw_rect_dsc</span><span class="p">)</span>

                <span class="n">draw_label_dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_label_dsc_t</span><span class="p">()</span>
                <span class="n">draw_label_dsc</span><span class="o">.</span><span class="n">init</span><span class="p">()</span>
                <span class="n">draw_label_dsc</span><span class="o">.</span><span class="n">color</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">color_white</span><span class="p">()</span>
                <span class="n">a</span><span class="o">.</span><span class="n">x1</span> <span class="o">+=</span> <span class="mi">5</span>
                <span class="n">a</span><span class="o">.</span><span class="n">x2</span> <span class="o">-=</span> <span class="mi">5</span>
                <span class="n">a</span><span class="o">.</span><span class="n">y1</span> <span class="o">+=</span> <span class="mi">5</span>
                <span class="n">a</span><span class="o">.</span><span class="n">y2</span> <span class="o">-=</span> <span class="mi">5</span>
                <span class="n">lv</span><span class="o">.</span><span class="n">draw_label</span><span class="p">(</span><span class="n">a</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">clip_area</span><span class="p">,</span> <span class="n">draw_label_dsc</span><span class="p">,</span> <span class="n">value_txt</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>

<span class="n">example_chart_6</span> <span class="o">=</span> <span class="n">ExampleChart_6</span><span class="p">()</span>
</pre></div>
</div>
</div>
<hr/></div>
<div class="section" id="scatter-chart">
<h3>Scatter chart<a class="headerlink" href="#scatter-chart" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_7&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_7.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_draw_part_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv_event_get_draw_part_dsc</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">part</span> <span class="o">==</span> <span class="n">LV_PART_ITEMS</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
        <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser</span> <span class="o">=</span> <span class="n">lv_chart_get_series_next</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
        <span class="kt">uint32_t</span> <span class="n">cnt</span> <span class="o">=</span> <span class="n">lv_chart_get_point_count</span><span class="p">(</span><span class="n">obj</span><span class="p">);</span>
        <span class="cm">/*Make older value more transparent*/</span>
        <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">rect_dsc</span><span class="o">-&gt;</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="p">(</span><span class="n">LV_OPA_COVER</span> <span class="o">*</span>  <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">id</span><span class="p">)</span> <span class="o">/</span> <span class="p">(</span><span class="n">cnt</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span>

        <span class="cm">/*Make smaller values blue, higher values red*/</span>
        <span class="n">lv_coord_t</span> <span class="o">*</span> <span class="n">x_array</span> <span class="o">=</span> <span class="n">lv_chart_get_x_array</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">ser</span><span class="p">);</span>
        <span class="n">lv_coord_t</span> <span class="o">*</span> <span class="n">y_array</span> <span class="o">=</span> <span class="n">lv_chart_get_y_array</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">ser</span><span class="p">);</span>
        <span class="cm">/*dsc-&gt;id is the tells drawing order, but we need the ID of the point being drawn.*/</span>
        <span class="kt">uint32_t</span> <span class="n">start_point</span> <span class="o">=</span> <span class="n">lv_chart_get_x_start_point</span><span class="p">(</span><span class="n">obj</span><span class="p">,</span> <span class="n">ser</span><span class="p">);</span>
        <span class="kt">uint32_t</span> <span class="n">p_act</span> <span class="o">=</span> <span class="p">(</span><span class="n">start_point</span> <span class="o">+</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">id</span><span class="p">)</span> <span class="o">%</span> <span class="n">cnt</span><span class="p">;</span> <span class="cm">/*Consider start point to get the index of the array*/</span>
        <span class="n">lv_opa_t</span> <span class="n">x_opa</span> <span class="o">=</span> <span class="p">(</span><span class="n">x_array</span><span class="p">[</span><span class="n">p_act</span><span class="p">]</span> <span class="o">*</span> <span class="n">LV_OPA_50</span><span class="p">)</span> <span class="o">/</span> <span class="mi">200</span><span class="p">;</span>
        <span class="n">lv_opa_t</span> <span class="n">y_opa</span> <span class="o">=</span> <span class="p">(</span><span class="n">y_array</span><span class="p">[</span><span class="n">p_act</span><span class="p">]</span> <span class="o">*</span> <span class="n">LV_OPA_50</span><span class="p">)</span> <span class="o">/</span> <span class="mi">1000</span><span class="p">;</span>

        <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">rect_dsc</span><span class="o">-&gt;</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">lv_color_mix</span><span class="p">(</span><span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span>
                                               <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">),</span>
                                               <span class="n">x_opa</span> <span class="o">+</span> <span class="n">y_opa</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="k">static</span> <span class="kt">void</span> <span class="nf">add_data</span><span class="p">(</span><span class="n">lv_timer_t</span> <span class="o">*</span> <span class="n">timer</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">LV_UNUSED</span><span class="p">(</span><span class="n">timer</span><span class="p">);</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span> <span class="o">=</span> <span class="n">timer</span><span class="o">-&gt;</span><span class="n">user_data</span><span class="p">;</span>
    <span class="n">lv_chart_set_next_value2</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_chart_get_series_next</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">),</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">200</span><span class="p">),</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1000</span><span class="p">));</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * A scatter chart</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_chart_7</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">chart</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_align</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_ALIGN_CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_DRAW_PART_BEGIN</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>
    <span class="n">lv_obj_set_style_line_width</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">LV_PART_ITEMS</span><span class="p">);</span>   <span class="cm">/*Remove the lines*/</span>

    <span class="n">lv_chart_set_type</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_TYPE_SCATTER</span><span class="p">);</span>

    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_X</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span>
    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>

    <span class="n">lv_chart_set_range</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_X</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">200</span><span class="p">);</span>
    <span class="n">lv_chart_set_range</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span>

    <span class="n">lv_chart_set_point_count</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="mi">50</span><span class="p">);</span>

    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">ser</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="kt">uint32_t</span> <span class="n">i</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="mi">50</span><span class="p">;</span> <span class="n">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">lv_chart_set_next_value2</span><span class="p">(</span><span class="n">chart</span><span class="p">,</span> <span class="n">ser</span><span class="p">,</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">200</span><span class="p">),</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1000</span><span class="p">));</span>
    <span class="p">}</span>

    <span class="n">lv_timer_create</span><span class="p">(</span><span class="n">add_data</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="n">chart</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_7.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_7.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="ch">#!/opt/bin/lv_micropython -i</span>
<span class="kn">import</span> <span class="nn">utime</span> <span class="k">as</span> <span class="nn">time</span>
<span class="kn">import</span> <span class="nn">lvgl</span> <span class="k">as</span> <span class="nn">lv</span>
<span class="kn">import</span> <span class="nn">display_driver</span>

<span class="k">def</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">e</span><span class="p">):</span>
    <span class="n">dsc</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_draw_part_dsc</span><span class="p">()</span>
    <span class="k">if</span> <span class="n">dsc</span><span class="o">.</span><span class="n">part</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">ITEMS</span><span class="p">:</span>
        <span class="n">obj</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_target</span><span class="p">()</span>
        <span class="n">ser</span> <span class="o">=</span> <span class="n">obj</span><span class="o">.</span><span class="n">get_series_next</span><span class="p">(</span><span class="kc">None</span><span class="p">)</span>
        <span class="n">cnt</span> <span class="o">=</span> <span class="n">obj</span><span class="o">.</span><span class="n">get_point_count</span><span class="p">()</span>
        <span class="c1"># print(&quot;cnt: &quot;,cnt)</span>
        <span class="c1"># Make older value more transparent</span>
        <span class="n">dsc</span><span class="o">.</span><span class="n">rect_dsc</span><span class="o">.</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">COVER</span> <span class="o">*</span>  <span class="n">dsc</span><span class="o">.</span><span class="n">id</span><span class="p">)</span> <span class="o">//</span> <span class="p">(</span><span class="n">cnt</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span>

        <span class="c1"># Make smaller values blue, higher values red</span>
        <span class="c1"># x_array = chart.get_x_array(ser)</span>
        <span class="c1"># y_array = chart.get_y_array(ser)</span>
        <span class="c1"># dsc-&gt;id is the tells drawing order, but we need the ID of the point being drawn.</span>
        <span class="n">start_point</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">get_x_start_point</span><span class="p">(</span><span class="n">ser</span><span class="p">)</span>
        <span class="c1"># print(&quot;start point: &quot;,start_point)</span>
        <span class="n">p_act</span> <span class="o">=</span> <span class="p">(</span><span class="n">start_point</span> <span class="o">+</span> <span class="n">dsc</span><span class="o">.</span><span class="n">id</span><span class="p">)</span> <span class="o">%</span> <span class="n">cnt</span> <span class="c1"># Consider start point to get the index of the array</span>
        <span class="c1"># print(&quot;p_act&quot;, p_act)</span>
        <span class="n">x_opa</span> <span class="o">=</span> <span class="p">(</span><span class="n">x_array</span><span class="p">[</span><span class="n">p_act</span><span class="p">]</span> <span class="o">*</span> <span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">_50</span><span class="p">)</span> <span class="o">//</span> <span class="mi">200</span>
        <span class="n">y_opa</span> <span class="o">=</span> <span class="p">(</span><span class="n">y_array</span><span class="p">[</span><span class="n">p_act</span><span class="p">]</span> <span class="o">*</span> <span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">_50</span><span class="p">)</span> <span class="o">//</span> <span class="mi">1000</span>

        <span class="n">dsc</span><span class="o">.</span><span class="n">rect_dsc</span><span class="o">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">)</span><span class="o">.</span><span class="n">color_mix</span><span class="p">(</span>
                                             <span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">BLUE</span><span class="p">),</span>
                                             <span class="n">x_opa</span> <span class="o">+</span> <span class="n">y_opa</span><span class="p">)</span>

<span class="k">def</span> <span class="nf">add_data</span><span class="p">(</span><span class="n">timer</span><span class="p">,</span><span class="n">chart</span><span class="p">):</span>
    <span class="c1"># print(&quot;add_data&quot;)</span>
    <span class="n">x</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">200</span><span class="p">)</span>
    <span class="n">y</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="mi">1000</span><span class="p">)</span>
    <span class="n">chart</span><span class="o">.</span><span class="n">set_next_value2</span><span class="p">(</span><span class="n">ser</span><span class="p">,</span> <span class="n">x</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span>
    <span class="c1"># chart.set_next_value2(chart.gx, y)</span>
    <span class="n">x_array</span><span class="o">.</span><span class="n">pop</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
    <span class="n">x_array</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
    <span class="n">y_array</span><span class="o">.</span><span class="n">pop</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span>
    <span class="n">y_array</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">y</span><span class="p">)</span>

<span class="c1">#</span>
<span class="c1"># A scatter chart</span>
<span class="c1">#</span>

<span class="n">chart</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">align</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">ALIGN</span><span class="o">.</span><span class="n">CENTER</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span><span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">DRAW_PART_BEGIN</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_style_line_width</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">ITEMS</span><span class="p">)</span>   <span class="c1"># Remove the lines</span>

<span class="n">chart</span><span class="o">.</span><span class="n">set_type</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">TYPE</span><span class="o">.</span><span class="n">SCATTER</span><span class="p">)</span>

<span class="n">chart</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_X</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="mi">50</span><span class="p">)</span>

<span class="n">chart</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_X</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">200</span><span class="p">)</span>
<span class="n">chart</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">1000</span><span class="p">)</span>

<span class="n">chart</span><span class="o">.</span><span class="n">set_point_count</span><span class="p">(</span><span class="mi">50</span><span class="p">)</span>

<span class="n">ser</span> <span class="o">=</span> <span class="n">chart</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>

<span class="n">x_array</span> <span class="o">=</span> <span class="p">[]</span>
<span class="n">y_array</span> <span class="o">=</span> <span class="p">[]</span>
<span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">50</span><span class="p">):</span>
    <span class="n">x_array</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">200</span><span class="p">))</span>
    <span class="n">y_array</span><span class="o">.</span><span class="n">append</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1000</span><span class="p">))</span>

<span class="n">ser</span><span class="o">.</span><span class="n">x_points</span> <span class="o">=</span> <span class="n">x_array</span>
<span class="n">ser</span><span class="o">.</span><span class="n">y_points</span> <span class="o">=</span> <span class="n">y_array</span>

<span class="c1"># Create an `lv_timer` to update the chart.</span>

<span class="n">timer</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">timer_create_basic</span><span class="p">()</span>
<span class="n">timer</span><span class="o">.</span><span class="n">set_period</span><span class="p">(</span><span class="mi">100</span><span class="p">)</span>
<span class="n">timer</span><span class="o">.</span><span class="n">set_cb</span><span class="p">(</span><span class="k">lambda</span> <span class="n">src</span><span class="p">:</span> <span class="n">add_data</span><span class="p">(</span><span class="n">timer</span><span class="p">,</span><span class="n">chart</span><span class="p">))</span>
</pre></div>
</div>
</div>
<hr/></div>
<div class="section" id="stacked-area-chart">
<h3>Stacked area chart<a class="headerlink" href="#stacked-area-chart" title="Permalink to this headline">¶</a></h3>
<div class='lv-example-container'><div class='lv-example' data-real-src='/8.4/_static/built_lv_examples/index.html?example=lv_example_chart_8&w=320&h=240'></div><div class='lv-example-description'></div></div><div class="toggle docutils container">
<div class="header docutils container">
<p>C code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_8.c'><i class="fa fa-github"></i>&nbsp;GitHub</a></div>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cp">#include</span> <span class="cpf">&quot;../../lv_examples.h&quot;</span><span class="cp"></span>
<span class="cp">#if LV_USE_CHART &amp;&amp; LV_DRAW_COMPLEX &amp;&amp; LV_BUILD_EXAMPLES</span>

<span class="cm">/*  A struct is used to keep track of the series list because later we need to draw to the series in the reverse order to which they were initialised. */</span>
<span class="k">typedef</span> <span class="k">struct</span> <span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span><span class="p">;</span>
    <span class="n">lv_chart_series_t</span> <span class="o">*</span> <span class="n">series_list</span><span class="p">[</span><span class="mi">3</span><span class="p">];</span>
<span class="p">}</span> <span class="n">stacked_area_chart_t</span><span class="p">;</span>

<span class="k">static</span> <span class="n">stacked_area_chart_t</span> <span class="n">stacked_area_chart</span><span class="p">;</span>

<span class="cm">/**</span>
<span class="cm"> * Callback which draws the blocks of colour under the lines</span>
<span class="cm"> **/</span>
<span class="k">static</span> <span class="kt">void</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">lv_event_t</span> <span class="o">*</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
    <span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">obj</span> <span class="o">=</span> <span class="n">lv_event_get_target</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>

    <span class="cm">/*Add the faded area before the lines are drawn*/</span>
    <span class="n">lv_obj_draw_part_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span> <span class="o">=</span> <span class="n">lv_event_get_draw_part_dsc</span><span class="p">(</span><span class="n">e</span><span class="p">);</span>
    <span class="k">if</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">part</span> <span class="o">==</span> <span class="n">LV_PART_ITEMS</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span><span class="p">(</span><span class="o">!</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span> <span class="o">||</span> <span class="o">!</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="p">)</span>
            <span class="k">return</span><span class="p">;</span>

        <span class="cm">/*Add a line mask that keeps the area below the line*/</span>
        <span class="n">lv_draw_mask_line_param_t</span> <span class="n">line_mask_param</span><span class="p">;</span>
        <span class="n">lv_draw_mask_line_points_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">line_mask_param</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">,</span>
                                      <span class="n">LV_DRAW_MASK_LINE_SIDE_BOTTOM</span><span class="p">);</span>
        <span class="kt">int16_t</span> <span class="n">line_mask_id</span> <span class="o">=</span> <span class="n">lv_draw_mask_add</span><span class="p">(</span><span class="o">&amp;</span><span class="n">line_mask_param</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>

        <span class="cm">/*Draw a rectangle that will be affected by the mask*/</span>
        <span class="n">lv_draw_rect_dsc_t</span> <span class="n">draw_rect_dsc</span><span class="p">;</span>
        <span class="n">lv_draw_rect_dsc_init</span><span class="p">(</span><span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">);</span>
        <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="n">LV_OPA_COVER</span><span class="p">;</span>
        <span class="n">draw_rect_dsc</span><span class="p">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">line_dsc</span><span class="o">-&gt;</span><span class="n">color</span><span class="p">;</span>

        <span class="n">lv_area_t</span> <span class="n">a</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">x</span><span class="p">;</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y1</span> <span class="o">=</span> <span class="n">LV_MIN</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p1</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">p2</span><span class="o">-&gt;</span><span class="n">y</span><span class="p">);</span>
        <span class="n">a</span><span class="p">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">obj</span><span class="o">-&gt;</span><span class="n">coords</span><span class="p">.</span><span class="n">y2</span> <span class="o">-</span>
               <span class="mi">13</span><span class="p">;</span> <span class="cm">/* -13 cuts off where the rectangle draws over the chart margin. Without this an area of 0 doesn&#39;t look like 0 */</span>
        <span class="n">lv_draw_rect</span><span class="p">(</span><span class="n">dsc</span><span class="o">-&gt;</span><span class="n">draw_ctx</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">draw_rect_dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">a</span><span class="p">);</span>

        <span class="cm">/*Remove the mask*/</span>
        <span class="n">lv_draw_mask_free_param</span><span class="p">(</span><span class="o">&amp;</span><span class="n">line_mask_param</span><span class="p">);</span>
        <span class="n">lv_draw_mask_remove_id</span><span class="p">(</span><span class="n">line_mask_id</span><span class="p">);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Helper function to round a fixed point number</span>
<span class="cm"> **/</span>
<span class="k">static</span> <span class="kt">int32_t</span> <span class="nf">round_fixed_point</span><span class="p">(</span><span class="kt">int32_t</span> <span class="n">n</span><span class="p">,</span> <span class="kt">int8_t</span> <span class="n">shift</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/* Create a bitmask to isolates the decimal part of the fixed point number */</span>
    <span class="kt">int32_t</span> <span class="n">mask</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
    <span class="k">for</span><span class="p">(</span><span class="kt">int32_t</span> <span class="n">bit_pos</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">bit_pos</span> <span class="o">&lt;</span> <span class="n">shift</span><span class="p">;</span> <span class="n">bit_pos</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">mask</span> <span class="o">=</span> <span class="p">(</span><span class="n">mask</span> <span class="o">&lt;&lt;</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kt">int32_t</span> <span class="n">decimal_part</span> <span class="o">=</span> <span class="n">n</span> <span class="o">&amp;</span> <span class="n">mask</span><span class="p">;</span>

    <span class="cm">/* Get 0.5 as fixed point */</span>
    <span class="kt">int32_t</span> <span class="n">rounding_boundary</span> <span class="o">=</span> <span class="mi">1</span> <span class="o">&lt;&lt;</span> <span class="p">(</span><span class="n">shift</span> <span class="o">-</span> <span class="mi">1</span><span class="p">);</span>

    <span class="cm">/* Return either the integer part of n or the integer part + 1 */</span>
    <span class="k">return</span> <span class="p">(</span><span class="n">decimal_part</span> <span class="o">&lt;</span> <span class="n">rounding_boundary</span><span class="p">)</span> <span class="o">?</span> <span class="p">(</span><span class="n">n</span> <span class="o">&amp;</span> <span class="o">~</span><span class="n">mask</span><span class="p">)</span> <span class="o">:</span> <span class="p">((</span><span class="n">n</span> <span class="o">&gt;&gt;</span> <span class="n">shift</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">&lt;&lt;</span> <span class="n">shift</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Stacked area chart</span>
<span class="cm"> */</span>
<span class="kt">void</span> <span class="nf">lv_example_chart_8</span><span class="p">(</span><span class="kt">void</span><span class="p">)</span>
<span class="p">{</span>
    <span class="cm">/*Create a stacked_area_chart.obj*/</span>
    <span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span> <span class="o">=</span> <span class="n">lv_chart_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">());</span>
    <span class="n">lv_obj_set_size</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">);</span>
    <span class="n">lv_obj_center</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">);</span>
    <span class="n">lv_chart_set_type</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_CHART_TYPE_LINE</span><span class="p">);</span>
    <span class="n">lv_chart_set_div_line_count</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">7</span><span class="p">);</span>
    <span class="n">lv_obj_add_event_cb</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">LV_EVENT_DRAW_PART_BEGIN</span><span class="p">,</span> <span class="nb">NULL</span><span class="p">);</span>

    <span class="cm">/* Set range to 0 to 100 for percentages. Draw ticks */</span>
    <span class="n">lv_chart_set_range</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
    <span class="n">lv_chart_set_axis_tick</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="nb">true</span><span class="p">,</span> <span class="mi">30</span><span class="p">);</span>

    <span class="cm">/*Set point size to 0 so the lines are smooth */</span>
    <span class="n">lv_obj_set_style_size</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">LV_PART_INDICATOR</span><span class="p">);</span>

    <span class="cm">/*Add some data series*/</span>
    <span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_RED</span><span class="p">),</span>
                                                            <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_BLUE</span><span class="p">),</span>
                                                            <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>
    <span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="n">lv_chart_add_series</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">lv_palette_main</span><span class="p">(</span><span class="n">LV_PALETTE_GREEN</span><span class="p">),</span>
                                                            <span class="n">LV_CHART_AXIS_PRIMARY_Y</span><span class="p">);</span>

    <span class="k">for</span><span class="p">(</span><span class="kt">int</span> <span class="n">point</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">point</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="n">point</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="cm">/* Make some random data */</span>
        <span class="kt">uint32_t</span> <span class="n">vals</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span><span class="n">lv_rand</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">20</span><span class="p">),</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">),</span> <span class="n">lv_rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)};</span>

        <span class="kt">int8_t</span> <span class="n">fixed_point_shift</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span>
        <span class="kt">uint32_t</span> <span class="n">total</span> <span class="o">=</span> <span class="n">vals</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">+</span> <span class="n">vals</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="n">vals</span><span class="p">[</span><span class="mi">2</span><span class="p">];</span>
        <span class="kt">uint32_t</span> <span class="n">draw_heights</span><span class="p">[</span><span class="mi">3</span><span class="p">];</span>
        <span class="kt">uint32_t</span> <span class="n">int_sum</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
        <span class="kt">uint32_t</span> <span class="n">decimal_sum</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>

        <span class="cm">/* Fixed point cascade rounding ensures percentages add to 100 */</span>
        <span class="k">for</span><span class="p">(</span><span class="kt">int32_t</span> <span class="n">series_index</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="n">series_index</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">;</span> <span class="n">series_index</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="n">decimal_sum</span> <span class="o">+=</span> <span class="p">(((</span><span class="n">vals</span><span class="p">[</span><span class="n">series_index</span><span class="p">]</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">&lt;&lt;</span> <span class="n">fixed_point_shift</span><span class="p">)</span> <span class="o">/</span> <span class="n">total</span><span class="p">);</span>
            <span class="n">int_sum</span> <span class="o">+=</span> <span class="p">(</span><span class="n">vals</span><span class="p">[</span><span class="n">series_index</span><span class="p">]</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">/</span> <span class="n">total</span><span class="p">;</span>

            <span class="kt">int32_t</span> <span class="n">modifier</span> <span class="o">=</span> <span class="p">(</span><span class="n">round_fixed_point</span><span class="p">(</span><span class="n">decimal_sum</span><span class="p">,</span> <span class="n">fixed_point_shift</span><span class="p">)</span> <span class="o">&gt;&gt;</span> <span class="n">fixed_point_shift</span><span class="p">)</span> <span class="o">-</span> <span class="n">int_sum</span><span class="p">;</span>

            <span class="cm">/*  The draw heights are equal to the percentage of the total each value is + the cumulative sum of the previous percentages.</span>
<span class="cm">                The accumulation is how the values get &quot;stacked&quot; */</span>
            <span class="n">draw_heights</span><span class="p">[</span><span class="n">series_index</span><span class="p">]</span> <span class="o">=</span> <span class="n">int_sum</span> <span class="o">+</span> <span class="n">modifier</span><span class="p">;</span>

            <span class="cm">/*  Draw to the series in the reverse order to which they were initialised.</span>
<span class="cm">                Without this the higher values will draw on top of the lower ones.</span>
<span class="cm">                This is because the Z-height of a series matches the order it was initialised */</span>
            <span class="n">lv_chart_set_next_value</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">,</span> <span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">3</span> <span class="o">-</span> <span class="n">series_index</span> <span class="o">-</span> <span class="mi">1</span><span class="p">],</span>
                                    <span class="n">draw_heights</span><span class="p">[</span><span class="n">series_index</span><span class="p">]);</span>
        <span class="p">}</span>
    <span class="p">}</span>

    <span class="n">lv_chart_refresh</span><span class="p">(</span><span class="n">stacked_area_chart</span><span class="p">.</span><span class="n">obj</span><span class="p">);</span>
<span class="p">}</span>

<span class="cp">#endif</span>
</pre></div>
</div>
</div>
<div class="toggle docutils container">
<div class="header docutils container">
<p>MicroPython code &nbsp;</p><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_8.py'><i class="fa fa-github"></i>&nbsp;GitHub</a><a class='lv-example-link-button' onclick="event.stopPropagation();" href='https://sim.lvgl.io/v8.4/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/d30df363ff69b9ad9706a533764a577b7ed9cc3e/examples/widgets/chart/lv_example_chart_8.py'><i class="fa fa-play"></i>&nbsp;Simulator</a></div>
<div class="highlight-py notranslate"><div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">display_driver</span>
<span class="kn">import</span> <span class="nn">lvgl</span> <span class="k">as</span> <span class="nn">lv</span>

<span class="c1"># A class is used to keep track of the series list because later we</span>
<span class="c1">#  need to draw to the series in the reverse order to which they were initialised.</span>
<span class="k">class</span> <span class="nc">StackedAreaChart</span><span class="p">:</span>
    <span class="k">def</span> <span class="fm">__init__</span><span class="p">(</span><span class="bp">self</span><span class="p">):</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">obj</span> <span class="o">=</span> <span class="kc">None</span>
        <span class="bp">self</span><span class="o">.</span><span class="n">series_list</span> <span class="o">=</span> <span class="p">[</span><span class="kc">None</span><span class="p">,</span> <span class="kc">None</span><span class="p">,</span> <span class="kc">None</span><span class="p">]</span>

<span class="n">stacked_area_chart</span> <span class="o">=</span> <span class="n">StackedAreaChart</span><span class="p">()</span>

<span class="c1">#</span>
<span class="c1"># Callback which draws the blocks of colour under the lines</span>
<span class="c1">#</span>
<span class="k">def</span> <span class="nf">draw_event_cb</span><span class="p">(</span><span class="n">e</span><span class="p">):</span>

    <span class="n">obj</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_target</span><span class="p">()</span>
    <span class="n">cont_a</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
    <span class="n">obj</span><span class="o">.</span><span class="n">get_coords</span><span class="p">(</span><span class="n">cont_a</span><span class="p">)</span>

    <span class="c1">#Add the faded area before the lines are drawn</span>
    <span class="n">dsc</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">get_draw_part_dsc</span><span class="p">()</span>
    <span class="k">if</span> <span class="n">dsc</span><span class="o">.</span><span class="n">part</span> <span class="o">==</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">ITEMS</span><span class="p">:</span>
        <span class="k">if</span> <span class="ow">not</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span> <span class="ow">or</span> <span class="ow">not</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="p">:</span>
            <span class="k">return</span>

        <span class="c1"># Add a line mask that keeps the area below the line</span>
        <span class="n">line_mask_param</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_line_param_t</span><span class="p">()</span>
        <span class="n">line_mask_param</span><span class="o">.</span><span class="n">points_init</span><span class="p">(</span><span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">x</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">y</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">DRAW_MASK_LINE_SIDE</span><span class="o">.</span><span class="n">BOTTOM</span><span class="p">)</span>
        <span class="n">line_mask_id</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_add</span><span class="p">(</span><span class="n">line_mask_param</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>

        <span class="c1">#Draw a rectangle that will be affected by the mask</span>
        <span class="n">draw_rect_dsc</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">draw_rect_dsc_t</span><span class="p">()</span>
        <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">init</span><span class="p">()</span>
        <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_opa</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">OPA</span><span class="o">.</span><span class="n">COVER</span>
        <span class="n">draw_rect_dsc</span><span class="o">.</span><span class="n">bg_color</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">line_dsc</span><span class="o">.</span><span class="n">color</span>

        <span class="n">a</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">area_t</span><span class="p">()</span>
        <span class="n">a</span><span class="o">.</span><span class="n">x1</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">x</span>
        <span class="n">a</span><span class="o">.</span><span class="n">x2</span> <span class="o">=</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">x</span>
        <span class="n">a</span><span class="o">.</span><span class="n">y1</span> <span class="o">=</span> <span class="nb">min</span><span class="p">(</span><span class="n">dsc</span><span class="o">.</span><span class="n">p1</span><span class="o">.</span><span class="n">y</span><span class="p">,</span> <span class="n">dsc</span><span class="o">.</span><span class="n">p2</span><span class="o">.</span><span class="n">y</span><span class="p">)</span>
        <span class="n">a</span><span class="o">.</span><span class="n">y2</span> <span class="o">=</span> <span class="n">cont_a</span><span class="o">.</span><span class="n">y2</span> <span class="o">-</span> <span class="mi">13</span> <span class="c1"># -13 cuts off where the rectangle draws over the chart margin. Without this an area of 0 doesn&#39;t look like 0</span>
        <span class="n">dsc</span><span class="o">.</span><span class="n">draw_ctx</span><span class="o">.</span><span class="n">rect</span><span class="p">(</span><span class="n">draw_rect_dsc</span><span class="p">,</span> <span class="n">a</span><span class="p">)</span>

        <span class="c1"># Remove the mask</span>
        <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_free_param</span><span class="p">(</span><span class="n">line_mask_param</span><span class="p">)</span>
        <span class="n">lv</span><span class="o">.</span><span class="n">draw_mask_remove_id</span><span class="p">(</span><span class="n">line_mask_id</span><span class="p">)</span>


<span class="c1">#</span>
<span class="c1"># Helper function to round a fixed point number</span>
<span class="c1">#</span>
<span class="k">def</span> <span class="nf">round_fixed_point</span><span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="n">shift</span><span class="p">):</span>
    <span class="c1"># Create a bitmask to isolates the decimal part of the fixed point number</span>
    <span class="n">mask</span> <span class="o">=</span> <span class="mi">1</span>
    <span class="k">for</span> <span class="n">bit_pos</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">shift</span><span class="p">):</span>
        <span class="n">mask</span> <span class="o">=</span> <span class="p">(</span><span class="n">mask</span> <span class="o">&lt;&lt;</span> <span class="mi">1</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span>

    <span class="n">decimal_part</span> <span class="o">=</span> <span class="n">n</span> <span class="o">&amp;</span> <span class="n">mask</span>

    <span class="c1"># Get 0.5 as fixed point</span>
    <span class="n">rounding_boundary</span> <span class="o">=</span> <span class="mi">1</span> <span class="o">&lt;&lt;</span> <span class="p">(</span><span class="n">shift</span> <span class="o">-</span> <span class="mi">1</span><span class="p">)</span>

    <span class="c1"># Return either the integer part of n or the integer part + 1</span>
    <span class="k">if</span> <span class="n">decimal_part</span> <span class="o">&lt;</span> <span class="n">rounding_boundary</span><span class="p">:</span>
        <span class="k">return</span> <span class="p">(</span><span class="n">n</span> <span class="o">&amp;</span> <span class="o">~</span><span class="n">mask</span><span class="p">)</span>
    <span class="k">return</span> <span class="p">((</span><span class="n">n</span> <span class="o">&gt;&gt;</span> <span class="n">shift</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">&lt;&lt;</span> <span class="n">shift</span>


<span class="c1">#</span>
<span class="c1"># Stacked area chart</span>
<span class="c1">#</span>
<span class="k">def</span> <span class="nf">lv_example_chart_8</span><span class="p">():</span>

    <span class="c1">#Create a stacked_area_chart.obj</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span> <span class="o">=</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">scr_act</span><span class="p">())</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">set_size</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">center</span><span class="p">()</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">set_type</span><span class="p">(</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">TYPE</span><span class="o">.</span><span class="n">LINE</span><span class="p">)</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">set_div_line_count</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">7</span><span class="p">)</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">add_event_cb</span><span class="p">(</span> <span class="n">draw_event_cb</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">EVENT</span><span class="o">.</span><span class="n">DRAW_PART_BEGIN</span><span class="p">,</span> <span class="kc">None</span><span class="p">)</span>

    <span class="c1"># Set range to 0 to 100 for percentages. Draw ticks</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">set_range</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">100</span><span class="p">)</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">set_axis_tick</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="mi">30</span><span class="p">)</span>

    <span class="c1">#Set point size to 0 so the lines are smooth</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">set_style_size</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">lv</span><span class="o">.</span><span class="n">PART</span><span class="o">.</span><span class="n">INDICATOR</span><span class="p">)</span>

    <span class="c1"># Add some data series</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">=</span> <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">RED</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">=</span> <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">BLUE</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>
    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">=</span> <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">add_series</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">palette_main</span><span class="p">(</span><span class="n">lv</span><span class="o">.</span><span class="n">PALETTE</span><span class="o">.</span><span class="n">GREEN</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">chart</span><span class="o">.</span><span class="n">AXIS</span><span class="o">.</span><span class="n">PRIMARY_Y</span><span class="p">)</span>

    <span class="k">for</span> <span class="n">point</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">10</span><span class="p">):</span>
        <span class="c1"># Make some random data</span>
        <span class="n">vals</span> <span class="o">=</span> <span class="p">[</span><span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">10</span><span class="p">,</span> <span class="mi">20</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">),</span> <span class="n">lv</span><span class="o">.</span><span class="n">rand</span><span class="p">(</span><span class="mi">20</span><span class="p">,</span> <span class="mi">30</span><span class="p">)]</span>

        <span class="n">fixed_point_shift</span> <span class="o">=</span> <span class="mi">5</span>
        <span class="n">total</span> <span class="o">=</span> <span class="n">vals</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">+</span> <span class="n">vals</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="n">vals</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span>
        <span class="n">draw_heights</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">]</span>
        <span class="n">int_sum</span> <span class="o">=</span> <span class="mi">0</span>
        <span class="n">decimal_sum</span> <span class="o">=</span> <span class="mi">0</span>

        <span class="c1"># Fixed point cascade rounding ensures percentages add to 100</span>
        <span class="k">for</span> <span class="n">series_index</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">3</span><span class="p">):</span>
            <span class="n">decimal_sum</span> <span class="o">+=</span> <span class="nb">int</span><span class="p">(((</span><span class="n">vals</span><span class="p">[</span><span class="n">series_index</span><span class="p">]</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">&lt;&lt;</span> <span class="n">fixed_point_shift</span><span class="p">)</span> <span class="o">//</span> <span class="n">total</span><span class="p">)</span>
            <span class="n">int_sum</span> <span class="o">+=</span> <span class="nb">int</span><span class="p">((</span><span class="n">vals</span><span class="p">[</span><span class="n">series_index</span><span class="p">]</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">/</span> <span class="n">total</span><span class="p">)</span>

            <span class="n">modifier</span> <span class="o">=</span> <span class="p">(</span><span class="n">round_fixed_point</span><span class="p">(</span><span class="n">decimal_sum</span><span class="p">,</span> <span class="n">fixed_point_shift</span><span class="p">)</span> <span class="o">&gt;&gt;</span> <span class="n">fixed_point_shift</span><span class="p">)</span> <span class="o">-</span> <span class="n">int_sum</span>

            <span class="c1">#  The draw heights are equal to the percentage of the total each value is + the cumulative sum of the previous percentages.</span>
            <span class="c1">#   The accumulation is how the values get &quot;stacked&quot;</span>
            <span class="n">draw_heights</span><span class="p">[</span><span class="n">series_index</span><span class="p">]</span> <span class="o">=</span> <span class="nb">int</span><span class="p">(</span><span class="n">int_sum</span> <span class="o">+</span> <span class="n">modifier</span><span class="p">)</span>

            <span class="c1">#  Draw to the series in the reverse order to which they were initialised.</span>
            <span class="c1">#   Without this the higher values will draw on top of the lower ones.</span>
            <span class="c1">#   This is because the Z-height of a series matches the order it was initialised</span>
            <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">set_next_value</span><span class="p">(</span> <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">series_list</span><span class="p">[</span><span class="mi">3</span> <span class="o">-</span> <span class="n">series_index</span> <span class="o">-</span> <span class="mi">1</span><span class="p">],</span> <span class="n">draw_heights</span><span class="p">[</span><span class="n">series_index</span><span class="p">])</span>

    <span class="n">stacked_area_chart</span><span class="o">.</span><span class="n">obj</span><span class="o">.</span><span class="n">refresh</span><span class="p">()</span>

<span class="n">lv_example_chart_8</span><span class="p">()</span>
</pre></div>
</div>
</div>
<hr/></div>
</div>
<div class="section" id="api">
<h2>API<a class="headerlink" href="#api" title="Permalink to this headline">¶</a></h2>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-typedefs">Typedefs</p>
<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv415lv_chart_type_t">
<span id="_CPPv315lv_chart_type_t"></span><span id="_CPPv215lv_chart_type_t"></span><span id="lv_chart_type_t"></span><span class="target" id="lv__chart_8h_1a498d916927185ea0556e99215a10d235"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_type_t</span></span></span><a class="headerlink" href="#_CPPv415lv_chart_type_t" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv422lv_chart_update_mode_t">
<span id="_CPPv322lv_chart_update_mode_t"></span><span id="_CPPv222lv_chart_update_mode_t"></span><span id="lv_chart_update_mode_t"></span><span class="target" id="lv__chart_8h_1acd87f4dcd0cfbdfd1da0d8ecc9a05f2d"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_update_mode_t</span></span></span><a class="headerlink" href="#_CPPv422lv_chart_update_mode_t" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv415lv_chart_axis_t">
<span id="_CPPv315lv_chart_axis_t"></span><span id="_CPPv215lv_chart_axis_t"></span><span id="lv_chart_axis_t"></span><span class="target" id="lv__chart_8h_1a970a24c47bd4458f21a0230f69045d54"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_axis_t</span></span></span><a class="headerlink" href="#_CPPv415lv_chart_axis_t" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-enums">Enums</p>
<dl class="cpp enum">
<dt class="sig sig-object cpp" id="_CPPv4Ut2_30">
<span id="_CPPv3Ut2_30"></span><span class="target" id="lv__chart_8h_1a0ed680fdb405e7195d9f14032851eebb"></span><span class="k"><span class="pre">enum</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">[anonymous]</span></span></span><a class="headerlink" href="#_CPPv4Ut2_30" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Chart types </p>
<p><em>Values:</em></p>
<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3018LV_CHART_TYPE_NONEE">
<span id="_CPPv3NUt2_3018LV_CHART_TYPE_NONEE"></span><span class="target" id="lv__chart_8h_1a0ed680fdb405e7195d9f14032851eebba3781231f7433084a6882833b90b2b287"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_TYPE_NONE</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3018LV_CHART_TYPE_NONEE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Don't draw the series </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3018LV_CHART_TYPE_LINEE">
<span id="_CPPv3NUt2_3018LV_CHART_TYPE_LINEE"></span><span class="target" id="lv__chart_8h_1a0ed680fdb405e7195d9f14032851eebbabff0662492b645adf865b30f5b0d2b89"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_TYPE_LINE</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3018LV_CHART_TYPE_LINEE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Connect the points with lines </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3017LV_CHART_TYPE_BARE">
<span id="_CPPv3NUt2_3017LV_CHART_TYPE_BARE"></span><span class="target" id="lv__chart_8h_1a0ed680fdb405e7195d9f14032851eebba1c1977e71f2de8d1857ae0b0306b0080"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_TYPE_BAR</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3017LV_CHART_TYPE_BARE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Draw columns </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3021LV_CHART_TYPE_SCATTERE">
<span id="_CPPv3NUt2_3021LV_CHART_TYPE_SCATTERE"></span><span class="target" id="lv__chart_8h_1a0ed680fdb405e7195d9f14032851eebbaac2fdf46d72a93a8fb6a92309e7ac643"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_TYPE_SCATTER</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3021LV_CHART_TYPE_SCATTERE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Draw points and lines in 2D (x,y coordinates) </p>
</dd></dl>

</dd></dl>

<dl class="cpp enum">
<dt class="sig sig-object cpp" id="_CPPv4Ut2_31">
<span id="_CPPv3Ut2_31"></span><span class="target" id="lv__chart_8h_1a0944a4353780132eeab7b06e3e42291d"></span><span class="k"><span class="pre">enum</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">[anonymous]</span></span></span><a class="headerlink" href="#_CPPv4Ut2_31" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Chart update mode for <code class="docutils literal notranslate"><span class="pre">lv_chart_set_next</span></code> </p>
<p><em>Values:</em></p>
<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3126LV_CHART_UPDATE_MODE_SHIFTE">
<span id="_CPPv3NUt2_3126LV_CHART_UPDATE_MODE_SHIFTE"></span><span class="target" id="lv__chart_8h_1a0944a4353780132eeab7b06e3e42291da9a0b47047328265061fc1ea51dc08f46"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_UPDATE_MODE_SHIFT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3126LV_CHART_UPDATE_MODE_SHIFTE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Shift old data to the left and add the new one the right </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3129LV_CHART_UPDATE_MODE_CIRCULARE">
<span id="_CPPv3NUt2_3129LV_CHART_UPDATE_MODE_CIRCULARE"></span><span class="target" id="lv__chart_8h_1a0944a4353780132eeab7b06e3e42291da515b1f581d44fc656b1dc7a3b560b6f6"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_UPDATE_MODE_CIRCULAR</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3129LV_CHART_UPDATE_MODE_CIRCULARE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Add the new data in a circular way </p>
</dd></dl>

</dd></dl>

<dl class="cpp enum">
<dt class="sig sig-object cpp" id="_CPPv4Ut2_32">
<span id="_CPPv3Ut2_32"></span><span class="target" id="lv__chart_8h_1a4790f45dcc812c1b00184a2edccdddf5"></span><span class="k"><span class="pre">enum</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">[anonymous]</span></span></span><a class="headerlink" href="#_CPPv4Ut2_32" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Enumeration of the axis' </p>
<p><em>Values:</em></p>
<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3223LV_CHART_AXIS_PRIMARY_YE">
<span id="_CPPv3NUt2_3223LV_CHART_AXIS_PRIMARY_YE"></span><span class="target" id="lv__chart_8h_1a4790f45dcc812c1b00184a2edccdddf5ab4d56111d313fae7564ace970f5030de"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_AXIS_PRIMARY_Y</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3223LV_CHART_AXIS_PRIMARY_YE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3225LV_CHART_AXIS_SECONDARY_YE">
<span id="_CPPv3NUt2_3225LV_CHART_AXIS_SECONDARY_YE"></span><span class="target" id="lv__chart_8h_1a4790f45dcc812c1b00184a2edccdddf5af7adb009e843a6b0688afb27b3cb3fe2"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_AXIS_SECONDARY_Y</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3225LV_CHART_AXIS_SECONDARY_YE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3223LV_CHART_AXIS_PRIMARY_XE">
<span id="_CPPv3NUt2_3223LV_CHART_AXIS_PRIMARY_XE"></span><span class="target" id="lv__chart_8h_1a4790f45dcc812c1b00184a2edccdddf5adbe8d91826e765e7311711dc50248c9b"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_AXIS_PRIMARY_X</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3223LV_CHART_AXIS_PRIMARY_XE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3225LV_CHART_AXIS_SECONDARY_XE">
<span id="_CPPv3NUt2_3225LV_CHART_AXIS_SECONDARY_XE"></span><span class="target" id="lv__chart_8h_1a4790f45dcc812c1b00184a2edccdddf5ac12b08c4a60cb602ee68eee2c632f8db"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_AXIS_SECONDARY_X</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3225LV_CHART_AXIS_SECONDARY_XE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_3219_LV_CHART_AXIS_LASTE">
<span id="_CPPv3NUt2_3219_LV_CHART_AXIS_LASTE"></span><span class="target" id="lv__chart_8h_1a4790f45dcc812c1b00184a2edccdddf5a87d8aedcf1ced7e7aaf8a1283e1c6b38"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">_LV_CHART_AXIS_LAST</span></span></span><a class="headerlink" href="#_CPPv4NUt2_3219_LV_CHART_AXIS_LASTE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</dd></dl>

<dl class="cpp enum">
<dt class="sig sig-object cpp" id="_CPPv425lv_chart_draw_part_type_t">
<span id="_CPPv325lv_chart_draw_part_type_t"></span><span id="_CPPv225lv_chart_draw_part_type_t"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045c"></span><span class="k"><span class="pre">enum</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_draw_part_type_t</span></span></span><a class="headerlink" href="#_CPPv425lv_chart_draw_part_type_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p><code class="docutils literal notranslate"><span class="pre">type</span></code> field in <code class="docutils literal notranslate"><span class="pre">lv_obj_draw_part_dsc_t</span></code> if <code class="docutils literal notranslate"><span class="pre">class_p</span> <span class="pre">=</span> <span class="pre">lv_chart_class</span></code> Used in <code class="docutils literal notranslate"><span class="pre">LV_EVENT_DRAW_PART_BEGIN</span></code> and <code class="docutils literal notranslate"><span class="pre">LV_EVENT_DRAW_PART_END</span></code> </p>
<p><em>Values:</em></p>
<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N25lv_chart_draw_part_type_t32LV_CHART_DRAW_PART_DIV_LINE_INITE">
<span id="_CPPv3N25lv_chart_draw_part_type_t32LV_CHART_DRAW_PART_DIV_LINE_INITE"></span><span id="_CPPv2N25lv_chart_draw_part_type_t32LV_CHART_DRAW_PART_DIV_LINE_INITE"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045ca3050f90c6723e37bcd893d5aa7460343"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_DRAW_PART_DIV_LINE_INIT</span></span></span><a class="headerlink" href="#_CPPv4N25lv_chart_draw_part_type_t32LV_CHART_DRAW_PART_DIV_LINE_INITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Used before/after drawn the div lines </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_HORE">
<span id="_CPPv3N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_HORE"></span><span id="_CPPv2N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_HORE"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045ca722876a8cd6fa8278ca018744d95dae5"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_DRAW_PART_DIV_LINE_HOR</span></span></span><a class="headerlink" href="#_CPPv4N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_HORE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Used for each horizontal division lines </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_VERE">
<span id="_CPPv3N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_VERE"></span><span id="_CPPv2N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_VERE"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045caf0255d41066fb68d5f4f481cc5236ab0"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_DRAW_PART_DIV_LINE_VER</span></span></span><a class="headerlink" href="#_CPPv4N25lv_chart_draw_part_type_t31LV_CHART_DRAW_PART_DIV_LINE_VERE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Used for each vertical division lines </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N25lv_chart_draw_part_type_t33LV_CHART_DRAW_PART_LINE_AND_POINTE">
<span id="_CPPv3N25lv_chart_draw_part_type_t33LV_CHART_DRAW_PART_LINE_AND_POINTE"></span><span id="_CPPv2N25lv_chart_draw_part_type_t33LV_CHART_DRAW_PART_LINE_AND_POINTE"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045ca846b7792ad712b4e3ef7ba630a7d9396"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_DRAW_PART_LINE_AND_POINT</span></span></span><a class="headerlink" href="#_CPPv4N25lv_chart_draw_part_type_t33LV_CHART_DRAW_PART_LINE_AND_POINTE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Used on line and scatter charts for lines and points </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N25lv_chart_draw_part_type_t22LV_CHART_DRAW_PART_BARE">
<span id="_CPPv3N25lv_chart_draw_part_type_t22LV_CHART_DRAW_PART_BARE"></span><span id="_CPPv2N25lv_chart_draw_part_type_t22LV_CHART_DRAW_PART_BARE"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045ca7b29ff7bf60a5970c607c535794c4d45"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_DRAW_PART_BAR</span></span></span><a class="headerlink" href="#_CPPv4N25lv_chart_draw_part_type_t22LV_CHART_DRAW_PART_BARE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Used on bar charts for the rectangles </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N25lv_chart_draw_part_type_t25LV_CHART_DRAW_PART_CURSORE">
<span id="_CPPv3N25lv_chart_draw_part_type_t25LV_CHART_DRAW_PART_CURSORE"></span><span id="_CPPv2N25lv_chart_draw_part_type_t25LV_CHART_DRAW_PART_CURSORE"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045caed8288127ebed96b9614a326f6f6d96f"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_DRAW_PART_CURSOR</span></span></span><a class="headerlink" href="#_CPPv4N25lv_chart_draw_part_type_t25LV_CHART_DRAW_PART_CURSORE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Used on cursor lines and points </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4N25lv_chart_draw_part_type_t29LV_CHART_DRAW_PART_TICK_LABELE">
<span id="_CPPv3N25lv_chart_draw_part_type_t29LV_CHART_DRAW_PART_TICK_LABELE"></span><span id="_CPPv2N25lv_chart_draw_part_type_t29LV_CHART_DRAW_PART_TICK_LABELE"></span><span class="target" id="lv__chart_8h_1a1f24110c4dc54ea249e6d05b660f045ca2fbbdfc19d8bd750ab21c289d93ae6f9"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_CHART_DRAW_PART_TICK_LABEL</span></span></span><a class="headerlink" href="#_CPPv4N25lv_chart_draw_part_type_t29LV_CHART_DRAW_PART_TICK_LABELE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Used on tick lines and labels </p>
</dd></dl>

</dd></dl>

</div>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-functions">Functions</p>
<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419LV_EXPORT_CONST_INT19LV_CHART_POINT_NONE">
<span id="_CPPv319LV_EXPORT_CONST_INT19LV_CHART_POINT_NONE"></span><span id="_CPPv219LV_EXPORT_CONST_INT19LV_CHART_POINT_NONE"></span><span id="LV_EXPORT_CONST_INT__LV_CHART_POINT_NONE"></span><span class="target" id="lv__chart_8h_1ac435574fc6e418c9622592b3710d110f"></span><span class="sig-name descname"><span class="n"><span class="pre">LV_EXPORT_CONST_INT</span></span></span><span class="sig-paren">(</span><span class="n"><span class="pre">LV_CHART_POINT_NONE</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419LV_EXPORT_CONST_INT19LV_CHART_POINT_NONE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv415lv_chart_createP8lv_obj_t">
<span id="_CPPv315lv_chart_createP8lv_obj_t"></span><span id="_CPPv215lv_chart_createP8lv_obj_t"></span><span id="lv_chart_create__lv_obj_tP"></span><span class="target" id="lv__chart_8h_1a4e94ae73a3cca396c556306829e038a3"></span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_create</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">parent</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv415lv_chart_createP8lv_obj_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Create a chart object </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>parent</strong> -- pointer to an object, it will be the parent of the new chart </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>pointer to the created chart </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv417lv_chart_set_typeP8lv_obj_t15lv_chart_type_t">
<span id="_CPPv317lv_chart_set_typeP8lv_obj_t15lv_chart_type_t"></span><span id="_CPPv217lv_chart_set_typeP8lv_obj_t15lv_chart_type_t"></span><span id="lv_chart_set_type__lv_obj_tP.lv_chart_type_t"></span><span class="target" id="lv__chart_8h_1ab564480b52da2510727a9eb470045f39"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_type</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv415lv_chart_type_t" title="lv_chart_type_t"><span class="n"><span class="pre">lv_chart_type_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">type</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv417lv_chart_set_typeP8lv_obj_t15lv_chart_type_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set a new type for a chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>type</strong> -- new type of the chart (from 'lv_chart_type_t' enum) </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_set_point_countP8lv_obj_t8uint16_t">
<span id="_CPPv324lv_chart_set_point_countP8lv_obj_t8uint16_t"></span><span id="_CPPv224lv_chart_set_point_countP8lv_obj_t8uint16_t"></span><span id="lv_chart_set_point_count__lv_obj_tP.uint16_t"></span><span class="target" id="lv__chart_8h_1a715027c242dc73f6d15538968c98d7f1"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_point_count</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">cnt</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_set_point_countP8lv_obj_t8uint16_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the number of points on a data line on a chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>cnt</strong> -- new number of points on the data lines </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv418lv_chart_set_rangeP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t">
<span id="_CPPv318lv_chart_set_rangeP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t"></span><span id="_CPPv218lv_chart_set_rangeP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t"></span><span id="lv_chart_set_range__lv_obj_tP.lv_chart_axis_t.lv_coord_t.lv_coord_t"></span><span class="target" id="lv__chart_8h_1ae56fe53c2a06b3015e391c9c6e728358"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_range</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv415lv_chart_axis_t" title="lv_chart_axis_t"><span class="n"><span class="pre">lv_chart_axis_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">axis</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">min</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">max</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv418lv_chart_set_rangeP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the minimal and maximal y values on an axis </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>axis</strong> -- <code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_PRIMARY_Y</span></code> or <code class="docutils literal notranslate"><span class="pre">LV_CHART_AXIS_SECONDARY_Y</span></code> </p></li>
<li><p><strong>min</strong> -- minimum value of the y axis </p></li>
<li><p><strong>max</strong> -- maximum value of the y axis </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_set_update_modeP8lv_obj_t22lv_chart_update_mode_t">
<span id="_CPPv324lv_chart_set_update_modeP8lv_obj_t22lv_chart_update_mode_t"></span><span id="_CPPv224lv_chart_set_update_modeP8lv_obj_t22lv_chart_update_mode_t"></span><span id="lv_chart_set_update_mode__lv_obj_tP.lv_chart_update_mode_t"></span><span class="target" id="lv__chart_8h_1a93ad4bb5e42fb4d789f162110d9a9142"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_update_mode</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv422lv_chart_update_mode_t" title="lv_chart_update_mode_t"><span class="n"><span class="pre">lv_chart_update_mode_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">update_mode</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_set_update_modeP8lv_obj_t22lv_chart_update_mode_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set update mode of the chart object. Affects </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>mode</strong> -- the update mode </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv427lv_chart_set_div_line_countP8lv_obj_t7uint8_t7uint8_t">
<span id="_CPPv327lv_chart_set_div_line_countP8lv_obj_t7uint8_t7uint8_t"></span><span id="_CPPv227lv_chart_set_div_line_countP8lv_obj_t7uint8_t7uint8_t"></span><span id="lv_chart_set_div_line_count__lv_obj_tP.uint8_t.uint8_t"></span><span class="target" id="lv__chart_8h_1a2e7134a6552d46ce4d0e2ce1fc7eb48d"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_div_line_count</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">hdiv</span></span>, <span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">vdiv</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv427lv_chart_set_div_line_countP8lv_obj_t7uint8_t7uint8_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the number of horizontal and vertical division lines </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>hdiv</strong> -- number of horizontal division lines </p></li>
<li><p><strong>vdiv</strong> -- number of vertical division lines </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_chart_set_zoom_xP8lv_obj_t8uint16_t">
<span id="_CPPv319lv_chart_set_zoom_xP8lv_obj_t8uint16_t"></span><span id="_CPPv219lv_chart_set_zoom_xP8lv_obj_t8uint16_t"></span><span id="lv_chart_set_zoom_x__lv_obj_tP.uint16_t"></span><span class="target" id="lv__chart_8h_1a7b32ebe14643c2f2644766e4b7fa3753"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_zoom_x</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">zoom_x</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_chart_set_zoom_xP8lv_obj_t8uint16_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Zoom into the chart in X direction </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>zoom_x</strong> -- zoom in x direction. LV_ZOOM_NONE or 256 for no zoom, 512 double zoom </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_chart_set_zoom_yP8lv_obj_t8uint16_t">
<span id="_CPPv319lv_chart_set_zoom_yP8lv_obj_t8uint16_t"></span><span id="_CPPv219lv_chart_set_zoom_yP8lv_obj_t8uint16_t"></span><span id="lv_chart_set_zoom_y__lv_obj_tP.uint16_t"></span><span class="target" id="lv__chart_8h_1aa67c1f90efa21a88b71dcb49c3acb193"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_zoom_y</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">zoom_y</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_chart_set_zoom_yP8lv_obj_t8uint16_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Zoom into the chart in Y direction </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>zoom_y</strong> -- zoom in y direction. LV_ZOOM_NONE or 256 for no zoom, 512 double zoom </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_chart_get_zoom_xPK8lv_obj_t">
<span id="_CPPv319lv_chart_get_zoom_xPK8lv_obj_t"></span><span id="_CPPv219lv_chart_get_zoom_xPK8lv_obj_t"></span><span id="lv_chart_get_zoom_x__lv_obj_tCP"></span><span class="target" id="lv__chart_8h_1aa7a242c85c350d016fb853e3d48459b6"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_zoom_x</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_chart_get_zoom_xPK8lv_obj_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get X zoom of a chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>obj</strong> -- pointer to a chart object </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the X zoom value </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_chart_get_zoom_yPK8lv_obj_t">
<span id="_CPPv319lv_chart_get_zoom_yPK8lv_obj_t"></span><span id="_CPPv219lv_chart_get_zoom_yPK8lv_obj_t"></span><span id="lv_chart_get_zoom_y__lv_obj_tCP"></span><span class="target" id="lv__chart_8h_1ac285227dea895e74b61252547b50f15b"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_zoom_y</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_chart_get_zoom_yPK8lv_obj_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get Y zoom of a chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>obj</strong> -- pointer to a chart object </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the Y zoom value </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv422lv_chart_set_axis_tickP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t10lv_coord_t10lv_coord_tb10lv_coord_t">
<span id="_CPPv322lv_chart_set_axis_tickP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t10lv_coord_t10lv_coord_tb10lv_coord_t"></span><span id="_CPPv222lv_chart_set_axis_tickP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t10lv_coord_t10lv_coord_tb10lv_coord_t"></span><span id="lv_chart_set_axis_tick__lv_obj_tP.lv_chart_axis_t.lv_coord_t.lv_coord_t.lv_coord_t.lv_coord_t.b.lv_coord_t"></span><span class="target" id="lv__chart_8h_1aef074a755a71c43f7e2c5025f864479a"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_axis_tick</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv415lv_chart_axis_t" title="lv_chart_axis_t"><span class="n"><span class="pre">lv_chart_axis_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">axis</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">major_len</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">minor_len</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">major_cnt</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">minor_cnt</span></span>, <span class="kt"><span class="pre">bool</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">label_en</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">draw_size</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv422lv_chart_set_axis_tickP8lv_obj_t15lv_chart_axis_t10lv_coord_t10lv_coord_t10lv_coord_t10lv_coord_tb10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the number of tick lines on an axis </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>axis</strong> -- an axis which ticks count should be set </p></li>
<li><p><strong>major_len</strong> -- length of major ticks </p></li>
<li><p><strong>minor_len</strong> -- length of minor ticks </p></li>
<li><p><strong>major_cnt</strong> -- number of major ticks on the axis </p></li>
<li><p><strong>minor_cnt</strong> -- number of minor ticks between two major ticks </p></li>
<li><p><strong>label_en</strong> -- true: enable label drawing on major ticks </p></li>
<li><p><strong>draw_size</strong> -- extra size required to draw the tick and labels (start with 20 px and increase if the ticks/labels are clipped) </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv417lv_chart_get_typePK8lv_obj_t">
<span id="_CPPv317lv_chart_get_typePK8lv_obj_t"></span><span id="_CPPv217lv_chart_get_typePK8lv_obj_t"></span><span id="lv_chart_get_type__lv_obj_tCP"></span><span class="target" id="lv__chart_8h_1a13500555e10ee92cbd723db16a2d959c"></span><a class="reference internal" href="#_CPPv415lv_chart_type_t" title="lv_chart_type_t"><span class="n"><span class="pre">lv_chart_type_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_type</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv417lv_chart_get_typePK8lv_obj_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the type of a chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>obj</strong> -- pointer to chart object </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>type of the chart (from '<a class="reference internal" href="#structlv__chart__t"><span class="std std-ref">lv_chart_t</span></a>' enum) </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_get_point_countPK8lv_obj_t">
<span id="_CPPv324lv_chart_get_point_countPK8lv_obj_t"></span><span id="_CPPv224lv_chart_get_point_countPK8lv_obj_t"></span><span id="lv_chart_get_point_count__lv_obj_tCP"></span><span class="target" id="lv__chart_8h_1aeadaef1a4d5b05d128d27e9ab3b5dee2"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_point_count</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_get_point_countPK8lv_obj_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the data point number per data line on chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>chart</strong> -- pointer to chart object </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>point number on each data line </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv426lv_chart_get_x_start_pointPK8lv_obj_tP17lv_chart_series_t">
<span id="_CPPv326lv_chart_get_x_start_pointPK8lv_obj_tP17lv_chart_series_t"></span><span id="_CPPv226lv_chart_get_x_start_pointPK8lv_obj_tP17lv_chart_series_t"></span><span id="lv_chart_get_x_start_point__lv_obj_tCP.lv_chart_series_tP"></span><span class="target" id="lv__chart_8h_1a9b206dff6e3dc100a82a8daeb5cddc26"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_x_start_point</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv426lv_chart_get_x_start_pointPK8lv_obj_tP17lv_chart_series_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the current index of the x-axis start point in the data array </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>chart</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the index of the current x start point in the data array </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv428lv_chart_get_point_pos_by_idP8lv_obj_tP17lv_chart_series_t8uint16_tP10lv_point_t">
<span id="_CPPv328lv_chart_get_point_pos_by_idP8lv_obj_tP17lv_chart_series_t8uint16_tP10lv_point_t"></span><span id="_CPPv228lv_chart_get_point_pos_by_idP8lv_obj_tP17lv_chart_series_t8uint16_tP10lv_point_t"></span><span id="lv_chart_get_point_pos_by_id__lv_obj_tP.lv_chart_series_tP.uint16_t.lv_point_tP"></span><span class="target" id="lv__chart_8h_1af19e67e6c0024464987578a6e9c7f65f"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_point_pos_by_id</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">id</span></span>, <span class="n"><span class="pre">lv_point_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">p_out</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv428lv_chart_get_point_pos_by_idP8lv_obj_tP17lv_chart_series_t8uint16_tP10lv_point_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the position of a point to the chart. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>chart</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to series </p></li>
<li><p><strong>id</strong> -- the index. </p></li>
<li><p><strong>p_out</strong> -- store the result position here </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv416lv_chart_refreshP8lv_obj_t">
<span id="_CPPv316lv_chart_refreshP8lv_obj_t"></span><span id="_CPPv216lv_chart_refreshP8lv_obj_t"></span><span id="lv_chart_refresh__lv_obj_tP"></span><span class="target" id="lv__chart_8h_1a63b3c0e87e5f6286318c2973c95f1a08"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_refresh</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv416lv_chart_refreshP8lv_obj_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Refresh a chart if its data line has changed </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>chart</strong> -- pointer to chart object </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_chart_add_seriesP8lv_obj_t10lv_color_t15lv_chart_axis_t">
<span id="_CPPv319lv_chart_add_seriesP8lv_obj_t10lv_color_t15lv_chart_axis_t"></span><span id="_CPPv219lv_chart_add_seriesP8lv_obj_t10lv_color_t15lv_chart_axis_t"></span><span id="lv_chart_add_series__lv_obj_tP.lv_color_t.lv_chart_axis_t"></span><span class="target" id="lv__chart_8h_1ad11e79d555311f74f93d716676a7e94e"></span><a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_add_series</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">color</span></span>, <a class="reference internal" href="#_CPPv415lv_chart_axis_t" title="lv_chart_axis_t"><span class="n"><span class="pre">lv_chart_axis_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">axis</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_chart_add_seriesP8lv_obj_t10lv_color_t15lv_chart_axis_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Allocate and add a data series to the chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>color</strong> -- color of the data series </p></li>
<li><p><strong>axis</strong> -- the y axis to which the series should be attached (::LV_CHART_AXIS_PRIMARY_Y or ::LV_CHART_AXIS_SECONDARY_Y) </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>pointer to the allocated data series </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv422lv_chart_remove_seriesP8lv_obj_tP17lv_chart_series_t">
<span id="_CPPv322lv_chart_remove_seriesP8lv_obj_tP17lv_chart_series_t"></span><span id="_CPPv222lv_chart_remove_seriesP8lv_obj_tP17lv_chart_series_t"></span><span id="lv_chart_remove_series__lv_obj_tP.lv_chart_series_tP"></span><span class="target" id="lv__chart_8h_1ae487fb2863bf944effb41e943d18ac18"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_remove_series</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">series</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv422lv_chart_remove_seriesP8lv_obj_tP17lv_chart_series_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Deallocate and remove a data series from a chart </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>chart</strong> -- pointer to a chart object </p></li>
<li><p><strong>series</strong> -- pointer to a data series on 'chart' </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv420lv_chart_hide_seriesP8lv_obj_tP17lv_chart_series_tb">
<span id="_CPPv320lv_chart_hide_seriesP8lv_obj_tP17lv_chart_series_tb"></span><span id="_CPPv220lv_chart_hide_seriesP8lv_obj_tP17lv_chart_series_tb"></span><span id="lv_chart_hide_series__lv_obj_tP.lv_chart_series_tP.b"></span><span class="target" id="lv__chart_8h_1a5e5d862b392e536043c1a0c7f69ef7ce"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_hide_series</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">chart</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">series</span></span>, <span class="kt"><span class="pre">bool</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">hide</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv420lv_chart_hide_seriesP8lv_obj_tP17lv_chart_series_tb" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Hide/Unhide a single series of a chart. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object. </p></li>
<li><p><strong>series</strong> -- pointer to a series object </p></li>
<li><p><strong>hide</strong> -- true: hide the series </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv425lv_chart_set_series_colorP8lv_obj_tP17lv_chart_series_t10lv_color_t">
<span id="_CPPv325lv_chart_set_series_colorP8lv_obj_tP17lv_chart_series_t10lv_color_t"></span><span id="_CPPv225lv_chart_set_series_colorP8lv_obj_tP17lv_chart_series_t10lv_color_t"></span><span id="lv_chart_set_series_color__lv_obj_tP.lv_chart_series_tP.lv_color_t"></span><span class="target" id="lv__chart_8h_1adba2ced7eec01909e9eb70f5fe192ce5"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_series_color</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">chart</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">series</span></span>, <span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">color</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv425lv_chart_set_series_colorP8lv_obj_tP17lv_chart_series_t10lv_color_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Change the color of a series </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object. </p></li>
<li><p><strong>series</strong> -- pointer to a series object </p></li>
<li><p><strong>color</strong> -- the new color of the series </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv426lv_chart_set_x_start_pointP8lv_obj_tP17lv_chart_series_t8uint16_t">
<span id="_CPPv326lv_chart_set_x_start_pointP8lv_obj_tP17lv_chart_series_t8uint16_t"></span><span id="_CPPv226lv_chart_set_x_start_pointP8lv_obj_tP17lv_chart_series_t8uint16_t"></span><span id="lv_chart_set_x_start_point__lv_obj_tP.lv_chart_series_tP.uint16_t"></span><span class="target" id="lv__chart_8h_1af4587e7edc5a7d95bcde8532a81e7ea8"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_x_start_point</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">id</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv426lv_chart_set_x_start_pointP8lv_obj_tP17lv_chart_series_t8uint16_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the index of the x-axis start point in the data array. This point will be considers the first (left) point and the other points will be drawn after it. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>id</strong> -- the index of the x point in the data array </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_get_series_nextPK8lv_obj_tPK17lv_chart_series_t">
<span id="_CPPv324lv_chart_get_series_nextPK8lv_obj_tPK17lv_chart_series_t"></span><span id="_CPPv224lv_chart_get_series_nextPK8lv_obj_tPK17lv_chart_series_t"></span><span id="lv_chart_get_series_next__lv_obj_tCP.lv_chart_series_tCP"></span><span class="target" id="lv__chart_8h_1ac402b10725e0dd91d42fa8fcf5d50338"></span><a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_series_next</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">chart</span></span>, <span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_get_series_nextPK8lv_obj_tPK17lv_chart_series_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the next series. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>chart</strong> -- pointer to a chart </p></li>
<li><p><strong>ser</strong> -- the previous series or NULL to get the first </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the next series or NULL if there is no more. </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv419lv_chart_add_cursorP8lv_obj_t10lv_color_t8lv_dir_t">
<span id="_CPPv319lv_chart_add_cursorP8lv_obj_t10lv_color_t8lv_dir_t"></span><span id="_CPPv219lv_chart_add_cursorP8lv_obj_t10lv_color_t8lv_dir_t"></span><span id="lv_chart_add_cursor__lv_obj_tP.lv_color_t.lv_dir_t"></span><span class="target" id="lv__chart_8h_1aaff6a034eb9f03295ca4bf9df438b897"></span><a class="reference internal" href="#_CPPv417lv_chart_cursor_t" title="lv_chart_cursor_t"><span class="n"><span class="pre">lv_chart_cursor_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_add_cursor</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">color</span></span>, <span class="n"><span class="pre">lv_dir_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">dir</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv419lv_chart_add_cursorP8lv_obj_t10lv_color_t8lv_dir_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Add a cursor with a given color </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to chart object </p></li>
<li><p><strong>color</strong> -- color of the cursor </p></li>
<li><p><strong>dir</strong> -- direction of the cursor. <code class="docutils literal notranslate"><span class="pre">LV_DIR_RIGHT/LEFT/TOP/DOWN/HOR/VER/ALL</span></code>. OR-ed values are possible </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>pointer to the created cursor </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_chart_set_cursor_posP8lv_obj_tP17lv_chart_cursor_tP10lv_point_t">
<span id="_CPPv323lv_chart_set_cursor_posP8lv_obj_tP17lv_chart_cursor_tP10lv_point_t"></span><span id="_CPPv223lv_chart_set_cursor_posP8lv_obj_tP17lv_chart_cursor_tP10lv_point_t"></span><span id="lv_chart_set_cursor_pos__lv_obj_tP.lv_chart_cursor_tP.lv_point_tP"></span><span class="target" id="lv__chart_8h_1a24fcab0e1c494936ba03fa5a8ed276ae"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_cursor_pos</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">chart</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_cursor_t" title="lv_chart_cursor_t"><span class="n"><span class="pre">lv_chart_cursor_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">cursor</span></span>, <span class="n"><span class="pre">lv_point_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">pos</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_chart_set_cursor_posP8lv_obj_tP17lv_chart_cursor_tP10lv_point_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the coordinate of the cursor with respect to the paddings </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>cursor</strong> -- pointer to the cursor </p></li>
<li><p><strong>pos</strong> -- the new coordinate of cursor relative to the chart </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv425lv_chart_set_cursor_pointP8lv_obj_tP17lv_chart_cursor_tP17lv_chart_series_t8uint16_t">
<span id="_CPPv325lv_chart_set_cursor_pointP8lv_obj_tP17lv_chart_cursor_tP17lv_chart_series_t8uint16_t"></span><span id="_CPPv225lv_chart_set_cursor_pointP8lv_obj_tP17lv_chart_cursor_tP17lv_chart_series_t8uint16_t"></span><span id="lv_chart_set_cursor_point__lv_obj_tP.lv_chart_cursor_tP.lv_chart_series_tP.uint16_t"></span><span class="target" id="lv__chart_8h_1ace11d8c88aab5f2019a6f4f5747d5265"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_cursor_point</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">chart</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_cursor_t" title="lv_chart_cursor_t"><span class="n"><span class="pre">lv_chart_cursor_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">cursor</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">point_id</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv425lv_chart_set_cursor_pointP8lv_obj_tP17lv_chart_cursor_tP17lv_chart_series_t8uint16_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Stick the cursor to a point </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>cursor</strong> -- pointer to the cursor </p></li>
<li><p><strong>ser</strong> -- pointer to a series </p></li>
<li><p><strong>point_id</strong> -- the point's index or <code class="docutils literal notranslate"><span class="pre">LV_CHART_POINT_NONE</span></code> to not assign to any points. </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv425lv_chart_get_cursor_pointP8lv_obj_tP17lv_chart_cursor_t">
<span id="_CPPv325lv_chart_get_cursor_pointP8lv_obj_tP17lv_chart_cursor_t"></span><span id="_CPPv225lv_chart_get_cursor_pointP8lv_obj_tP17lv_chart_cursor_t"></span><span id="lv_chart_get_cursor_point__lv_obj_tP.lv_chart_cursor_tP"></span><span class="target" id="lv__chart_8h_1a605ecf3aa1f3d9a03228d74818945794"></span><span class="n"><span class="pre">lv_point_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_cursor_point</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">chart</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_cursor_t" title="lv_chart_cursor_t"><span class="n"><span class="pre">lv_chart_cursor_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">cursor</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv425lv_chart_get_cursor_pointP8lv_obj_tP17lv_chart_cursor_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the coordinate of the cursor with respect to the paddings </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>cursor</strong> -- pointer to cursor </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>coordinate of the cursor as lv_point_t </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv422lv_chart_set_all_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t">
<span id="_CPPv322lv_chart_set_all_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t"></span><span id="_CPPv222lv_chart_set_all_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t"></span><span id="lv_chart_set_all_value__lv_obj_tP.lv_chart_series_tP.lv_coord_t"></span><span class="target" id="lv__chart_8h_1a8bba61a3c833eade5e3ea0a7ee9eb2f8"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_all_value</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">value</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv422lv_chart_set_all_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Initialize all data points of a series with a value </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>value</strong> -- the new value for all points. <code class="docutils literal notranslate"><span class="pre">LV_CHART_POINT_NONE</span></code> can be used to hide the points. </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_chart_set_next_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t">
<span id="_CPPv323lv_chart_set_next_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t"></span><span id="_CPPv223lv_chart_set_next_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t"></span><span id="lv_chart_set_next_value__lv_obj_tP.lv_chart_series_tP.lv_coord_t"></span><span class="target" id="lv__chart_8h_1a65d072352ea0eb36db0c0bf2c69b26d5"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_next_value</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">value</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_chart_set_next_valueP8lv_obj_tP17lv_chart_series_t10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the next point's Y value according to the update mode policy. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>value</strong> -- the new value of the next data </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_set_next_value2P8lv_obj_tP17lv_chart_series_t10lv_coord_t10lv_coord_t">
<span id="_CPPv324lv_chart_set_next_value2P8lv_obj_tP17lv_chart_series_t10lv_coord_t10lv_coord_t"></span><span id="_CPPv224lv_chart_set_next_value2P8lv_obj_tP17lv_chart_series_t10lv_coord_t10lv_coord_t"></span><span id="lv_chart_set_next_value2__lv_obj_tP.lv_chart_series_tP.lv_coord_t.lv_coord_t"></span><span class="target" id="lv__chart_8h_1ad0e4a3e10119be594d2e88fa48cd0e64"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_next_value2</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">x_value</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">y_value</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_set_next_value2P8lv_obj_tP17lv_chart_series_t10lv_coord_t10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the next point's X and Y value according to the update mode policy. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>x_value</strong> -- the new X value of the next data </p></li>
<li><p><strong>y_value</strong> -- the new Y value of the next data </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_set_value_by_idP8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t">
<span id="_CPPv324lv_chart_set_value_by_idP8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t"></span><span id="_CPPv224lv_chart_set_value_by_idP8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t"></span><span id="lv_chart_set_value_by_id__lv_obj_tP.lv_chart_series_tP.uint16_t.lv_coord_t"></span><span class="target" id="lv__chart_8h_1a66931cd76d431f089f754e40ffee6f29"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_value_by_id</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">id</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">value</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_set_value_by_idP8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set an individual point's y value of a chart's series directly based on its index </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>id</strong> -- the index of the x point in the array </p></li>
<li><p><strong>value</strong> -- value to assign to array point </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv425lv_chart_set_value_by_id2P8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t10lv_coord_t">
<span id="_CPPv325lv_chart_set_value_by_id2P8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t10lv_coord_t"></span><span id="_CPPv225lv_chart_set_value_by_id2P8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t10lv_coord_t"></span><span id="lv_chart_set_value_by_id2__lv_obj_tP.lv_chart_series_tP.uint16_t.lv_coord_t.lv_coord_t"></span><span class="target" id="lv__chart_8h_1ad5f715f5d5a63d688849e57976cebcca"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_value_by_id2</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">id</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">x_value</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">y_value</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv425lv_chart_set_value_by_id2P8lv_obj_tP17lv_chart_series_t8uint16_t10lv_coord_t10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set an individual point's x and y value of a chart's series directly based on its index Can be used only with <code class="docutils literal notranslate"><span class="pre">LV_CHART_TYPE_SCATTER</span></code>. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>id</strong> -- the index of the x point in the array </p></li>
<li><p><strong>x_value</strong> -- the new X value of the next data </p></li>
<li><p><strong>y_value</strong> -- the new Y value of the next data </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_set_ext_y_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t">
<span id="_CPPv324lv_chart_set_ext_y_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t"></span><span id="_CPPv224lv_chart_set_ext_y_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t"></span><span id="lv_chart_set_ext_y_array__lv_obj_tP.lv_chart_series_tP.lv_coord_tA"></span><span class="target" id="lv__chart_8h_1aa188b0312b2ee4d75f0d85faf89cf10f"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_ext_y_array</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">array</span></span><span class="p"><span class="pre">[</span></span><span class="p"><span class="pre">]</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_set_ext_y_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set an external array for the y data points to use for the chart NOTE: It is the users responsibility to make sure the <code class="docutils literal notranslate"><span class="pre">point_cnt</span></code> matches the external array size. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>array</strong> -- external array of points for chart </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv424lv_chart_set_ext_x_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t">
<span id="_CPPv324lv_chart_set_ext_x_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t"></span><span id="_CPPv224lv_chart_set_ext_x_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t"></span><span id="lv_chart_set_ext_x_array__lv_obj_tP.lv_chart_series_tP.lv_coord_tA"></span><span class="target" id="lv__chart_8h_1ae5d5c86119817aae839b9e6ff3046d38"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_set_ext_x_array</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">array</span></span><span class="p"><span class="pre">[</span></span><span class="p"><span class="pre">]</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv424lv_chart_set_ext_x_arrayP8lv_obj_tP17lv_chart_series_tA_10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set an external array for the x data points to use for the chart NOTE: It is the users responsibility to make sure the <code class="docutils literal notranslate"><span class="pre">point_cnt</span></code> matches the external array size. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
<li><p><strong>array</strong> -- external array of points for chart </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv420lv_chart_get_y_arrayPK8lv_obj_tP17lv_chart_series_t">
<span id="_CPPv320lv_chart_get_y_arrayPK8lv_obj_tP17lv_chart_series_t"></span><span id="_CPPv220lv_chart_get_y_arrayPK8lv_obj_tP17lv_chart_series_t"></span><span id="lv_chart_get_y_array__lv_obj_tCP.lv_chart_series_tP"></span><span class="target" id="lv__chart_8h_1aed7b23fdc1efe5742c23fc39f6305e60"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_y_array</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv420lv_chart_get_y_arrayPK8lv_obj_tP17lv_chart_series_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the array of y values of a series </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the array of values with 'point_count' elements </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv420lv_chart_get_x_arrayPK8lv_obj_tP17lv_chart_series_t">
<span id="_CPPv320lv_chart_get_x_arrayPK8lv_obj_tP17lv_chart_series_t"></span><span id="_CPPv220lv_chart_get_x_arrayPK8lv_obj_tP17lv_chart_series_t"></span><span id="lv_chart_get_x_array__lv_obj_tCP.lv_chart_series_tP"></span><span class="target" id="lv__chart_8h_1ab1624b88b19f8eac533c03e35890d804"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_x_array</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span>, <a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">ser</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv420lv_chart_get_x_arrayPK8lv_obj_tP17lv_chart_series_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the array of x values of a series </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>obj</strong> -- pointer to a chart object </p></li>
<li><p><strong>ser</strong> -- pointer to a data series on 'chart' </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the array of values with 'point_count' elements </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv426lv_chart_get_pressed_pointPK8lv_obj_t">
<span id="_CPPv326lv_chart_get_pressed_pointPK8lv_obj_t"></span><span id="_CPPv226lv_chart_get_pressed_pointPK8lv_obj_t"></span><span id="lv_chart_get_pressed_point__lv_obj_tCP"></span><span class="target" id="lv__chart_8h_1a3df0e2ef309d5106bfa84950d005ec0f"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_get_pressed_point</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">obj</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv426lv_chart_get_pressed_pointPK8lv_obj_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the index of the currently pressed point. It's the same for every series. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>obj</strong> -- pointer to a chart object </p>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>the index of the point [0 .. point count] or LV_CHART_POINT_ID_NONE if no point is being pressed </p>
</dd>
</dl>
</dd></dl>

</div>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-variables">Variables</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv414lv_chart_class">
<span id="_CPPv314lv_chart_class"></span><span id="_CPPv214lv_chart_class"></span><span id="lv_chart_class__lv_obj_class_tC"></span><span class="target" id="lv__chart_8h_1ae7d2ac58b6dc4028517083b684995355"></span><span class="k"><span class="pre">const</span></span><span class="w"> </span><span class="n"><span class="pre">lv_obj_class_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_class</span></span></span><a class="headerlink" href="#_CPPv414lv_chart_class" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
<dl class="cpp struct">
<dt class="sig sig-object cpp" id="_CPPv417lv_chart_series_t">
<span id="_CPPv317lv_chart_series_t"></span><span id="_CPPv217lv_chart_series_t"></span><span id="lv_chart_series_t"></span><span class="target" id="structlv__chart__series__t"></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_series_t</span></span></span><a class="headerlink" href="#_CPPv417lv_chart_series_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><em>#include &lt;lv_chart.h&gt;</em><p>Descriptor a chart series </p>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-public-members">Public Members</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t8x_pointsE">
<span id="_CPPv3N17lv_chart_series_t8x_pointsE"></span><span id="_CPPv2N17lv_chart_series_t8x_pointsE"></span><span id="lv_chart_series_t::x_points__lv_coord_tP"></span><span class="target" id="structlv__chart__series__t_1aad2ec08c871f90e1bdea2134216d4d21"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">x_points</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t8x_pointsE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t8y_pointsE">
<span id="_CPPv3N17lv_chart_series_t8y_pointsE"></span><span id="_CPPv2N17lv_chart_series_t8y_pointsE"></span><span id="lv_chart_series_t::y_points__lv_coord_tP"></span><span class="target" id="structlv__chart__series__t_1a8473b421b3fc0d8535c1191da3d29ff0"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">y_points</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t8y_pointsE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t5colorE">
<span id="_CPPv3N17lv_chart_series_t5colorE"></span><span id="_CPPv2N17lv_chart_series_t5colorE"></span><span id="lv_chart_series_t::color__lv_color_t"></span><span class="target" id="structlv__chart__series__t_1ab998e579db24aa8522b84b686ac65bac"></span><span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">color</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t5colorE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t11start_pointE">
<span id="_CPPv3N17lv_chart_series_t11start_pointE"></span><span id="_CPPv2N17lv_chart_series_t11start_pointE"></span><span id="lv_chart_series_t::start_point__uint16_t"></span><span class="target" id="structlv__chart__series__t_1ad98c186d0f75bab086140f59dc24f833"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">start_point</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t11start_pointE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t6hiddenE">
<span id="_CPPv3N17lv_chart_series_t6hiddenE"></span><span id="_CPPv2N17lv_chart_series_t6hiddenE"></span><span id="lv_chart_series_t::hidden__uint8_t"></span><span class="target" id="structlv__chart__series__t_1a36bca1693831a7b81de49c94f5098659"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">hidden</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t6hiddenE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t18x_ext_buf_assignedE">
<span id="_CPPv3N17lv_chart_series_t18x_ext_buf_assignedE"></span><span id="_CPPv2N17lv_chart_series_t18x_ext_buf_assignedE"></span><span id="lv_chart_series_t::x_ext_buf_assigned__uint8_t"></span><span class="target" id="structlv__chart__series__t_1aa1cb06726066312e2df23616542726df"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">x_ext_buf_assigned</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t18x_ext_buf_assignedE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t18y_ext_buf_assignedE">
<span id="_CPPv3N17lv_chart_series_t18y_ext_buf_assignedE"></span><span id="_CPPv2N17lv_chart_series_t18y_ext_buf_assignedE"></span><span id="lv_chart_series_t::y_ext_buf_assigned__uint8_t"></span><span class="target" id="structlv__chart__series__t_1aaa501e1d9f909a62a2e1890295e5544a"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">y_ext_buf_assigned</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t18y_ext_buf_assignedE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t10x_axis_secE">
<span id="_CPPv3N17lv_chart_series_t10x_axis_secE"></span><span id="_CPPv2N17lv_chart_series_t10x_axis_secE"></span><span id="lv_chart_series_t::x_axis_sec__uint8_t"></span><span class="target" id="structlv__chart__series__t_1ae934e2ff1c6843310a055708c214415b"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">x_axis_sec</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t10x_axis_secE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_series_t10y_axis_secE">
<span id="_CPPv3N17lv_chart_series_t10y_axis_secE"></span><span id="_CPPv2N17lv_chart_series_t10y_axis_secE"></span><span id="lv_chart_series_t::y_axis_sec__uint8_t"></span><span class="target" id="structlv__chart__series__t_1acefeadc04c6a49e9522310a32bf4046c"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">y_axis_sec</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_series_t10y_axis_secE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
</dd></dl>

<dl class="cpp struct">
<dt class="sig sig-object cpp" id="_CPPv417lv_chart_cursor_t">
<span id="_CPPv317lv_chart_cursor_t"></span><span id="_CPPv217lv_chart_cursor_t"></span><span id="lv_chart_cursor_t"></span><span class="target" id="structlv__chart__cursor__t"></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_cursor_t</span></span></span><a class="headerlink" href="#_CPPv417lv_chart_cursor_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-public-members">Public Members</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_cursor_t3posE">
<span id="_CPPv3N17lv_chart_cursor_t3posE"></span><span id="_CPPv2N17lv_chart_cursor_t3posE"></span><span id="lv_chart_cursor_t::pos__lv_point_t"></span><span class="target" id="structlv__chart__cursor__t_1a50022868cecdd28cfebb7f2f983497de"></span><span class="n"><span class="pre">lv_point_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">pos</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_cursor_t3posE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_cursor_t8point_idE">
<span id="_CPPv3N17lv_chart_cursor_t8point_idE"></span><span id="_CPPv2N17lv_chart_cursor_t8point_idE"></span><span id="lv_chart_cursor_t::point_id__lv_coord_t"></span><span class="target" id="structlv__chart__cursor__t_1a7cc529cfef65d493dff3ceb2a076799a"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">point_id</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_cursor_t8point_idE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_cursor_t5colorE">
<span id="_CPPv3N17lv_chart_cursor_t5colorE"></span><span id="_CPPv2N17lv_chart_cursor_t5colorE"></span><span id="lv_chart_cursor_t::color__lv_color_t"></span><span class="target" id="structlv__chart__cursor__t_1adc7c21318c06a41429581a7db7bb9717"></span><span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">color</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_cursor_t5colorE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_cursor_t3serE">
<span id="_CPPv3N17lv_chart_cursor_t3serE"></span><span id="_CPPv2N17lv_chart_cursor_t3serE"></span><span id="lv_chart_cursor_t::ser__lv_chart_series_tP"></span><span class="target" id="structlv__chart__cursor__t_1a56b2d2ec285ca447df54ba56406e1366"></span><a class="reference internal" href="#_CPPv417lv_chart_series_t" title="lv_chart_series_t"><span class="n"><span class="pre">lv_chart_series_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">ser</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_cursor_t3serE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_cursor_t3dirE">
<span id="_CPPv3N17lv_chart_cursor_t3dirE"></span><span id="_CPPv2N17lv_chart_cursor_t3dirE"></span><span id="lv_chart_cursor_t::dir__lv_dir_t"></span><span class="target" id="structlv__chart__cursor__t_1aedf67dd9f78073fb92212d341ba6cf9c"></span><span class="n"><span class="pre">lv_dir_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">dir</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_cursor_t3dirE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N17lv_chart_cursor_t7pos_setE">
<span id="_CPPv3N17lv_chart_cursor_t7pos_setE"></span><span id="_CPPv2N17lv_chart_cursor_t7pos_setE"></span><span id="lv_chart_cursor_t::pos_set__uint8_t"></span><span class="target" id="structlv__chart__cursor__t_1a92043b5e52ea02f00e50ae06e2504130"></span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">pos_set</span></span></span><a class="headerlink" href="#_CPPv4N17lv_chart_cursor_t7pos_setE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
</dd></dl>

<dl class="cpp struct">
<dt class="sig sig-object cpp" id="_CPPv419lv_chart_tick_dsc_t">
<span id="_CPPv319lv_chart_tick_dsc_t"></span><span id="_CPPv219lv_chart_tick_dsc_t"></span><span id="lv_chart_tick_dsc_t"></span><span class="target" id="structlv__chart__tick__dsc__t"></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_tick_dsc_t</span></span></span><a class="headerlink" href="#_CPPv419lv_chart_tick_dsc_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-public-members">Public Members</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N19lv_chart_tick_dsc_t9major_lenE">
<span id="_CPPv3N19lv_chart_tick_dsc_t9major_lenE"></span><span id="_CPPv2N19lv_chart_tick_dsc_t9major_lenE"></span><span id="lv_chart_tick_dsc_t::major_len__lv_coord_t"></span><span class="target" id="structlv__chart__tick__dsc__t_1a697d590d388e5840096c09e25729871f"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">major_len</span></span></span><a class="headerlink" href="#_CPPv4N19lv_chart_tick_dsc_t9major_lenE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N19lv_chart_tick_dsc_t9minor_lenE">
<span id="_CPPv3N19lv_chart_tick_dsc_t9minor_lenE"></span><span id="_CPPv2N19lv_chart_tick_dsc_t9minor_lenE"></span><span id="lv_chart_tick_dsc_t::minor_len__lv_coord_t"></span><span class="target" id="structlv__chart__tick__dsc__t_1a9e407b28a47866b75c241e790eab552f"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">minor_len</span></span></span><a class="headerlink" href="#_CPPv4N19lv_chart_tick_dsc_t9minor_lenE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N19lv_chart_tick_dsc_t9draw_sizeE">
<span id="_CPPv3N19lv_chart_tick_dsc_t9draw_sizeE"></span><span id="_CPPv2N19lv_chart_tick_dsc_t9draw_sizeE"></span><span id="lv_chart_tick_dsc_t::draw_size__lv_coord_t"></span><span class="target" id="structlv__chart__tick__dsc__t_1a5aa80c88278ee7195cc798172767aa82"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">draw_size</span></span></span><a class="headerlink" href="#_CPPv4N19lv_chart_tick_dsc_t9draw_sizeE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N19lv_chart_tick_dsc_t9minor_cntE">
<span id="_CPPv3N19lv_chart_tick_dsc_t9minor_cntE"></span><span id="_CPPv2N19lv_chart_tick_dsc_t9minor_cntE"></span><span id="lv_chart_tick_dsc_t::minor_cnt__uint32_t"></span><span class="target" id="structlv__chart__tick__dsc__t_1afb03dd4a6522d418d7de721bab994d7b"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">minor_cnt</span></span></span><a class="headerlink" href="#_CPPv4N19lv_chart_tick_dsc_t9minor_cntE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N19lv_chart_tick_dsc_t9major_cntE">
<span id="_CPPv3N19lv_chart_tick_dsc_t9major_cntE"></span><span id="_CPPv2N19lv_chart_tick_dsc_t9major_cntE"></span><span id="lv_chart_tick_dsc_t::major_cnt__uint32_t"></span><span class="target" id="structlv__chart__tick__dsc__t_1abc55cdb7d491f9658029b7b666cf0c9b"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">major_cnt</span></span></span><a class="headerlink" href="#_CPPv4N19lv_chart_tick_dsc_t9major_cntE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N19lv_chart_tick_dsc_t8label_enE">
<span id="_CPPv3N19lv_chart_tick_dsc_t8label_enE"></span><span id="_CPPv2N19lv_chart_tick_dsc_t8label_enE"></span><span id="lv_chart_tick_dsc_t::label_en__uint32_t"></span><span class="target" id="structlv__chart__tick__dsc__t_1a58611c0e4f15dfdc3752acacc4a130bc"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">label_en</span></span></span><a class="headerlink" href="#_CPPv4N19lv_chart_tick_dsc_t8label_enE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
</dd></dl>

<dl class="cpp struct">
<dt class="sig sig-object cpp" id="_CPPv410lv_chart_t">
<span id="_CPPv310lv_chart_t"></span><span id="_CPPv210lv_chart_t"></span><span id="lv_chart_t"></span><span class="target" id="structlv__chart__t"></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_chart_t</span></span></span><a class="headerlink" href="#_CPPv410lv_chart_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-public-members">Public Members</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t3objE">
<span id="_CPPv3N10lv_chart_t3objE"></span><span id="_CPPv2N10lv_chart_t3objE"></span><span id="lv_chart_t::obj__lv_obj_t"></span><span class="target" id="structlv__chart__t_1a2a1d73c81e87504238cf6ac501dc7783"></span><a class="reference internal" href="../obj.html#_CPPv48lv_obj_t" title="lv_obj_t"><span class="n"><span class="pre">lv_obj_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">obj</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t3objE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t9series_llE">
<span id="_CPPv3N10lv_chart_t9series_llE"></span><span id="_CPPv2N10lv_chart_t9series_llE"></span><span id="lv_chart_t::series_ll__lv_ll_t"></span><span class="target" id="structlv__chart__t_1a1e1c6909d2229a3894b89ddaca822ccc"></span><span class="n"><span class="pre">lv_ll_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">series_ll</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t9series_llE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Linked list for the series (stores <a class="reference internal" href="#structlv__chart__series__t"><span class="std std-ref">lv_chart_series_t</span></a>) </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t9cursor_llE">
<span id="_CPPv3N10lv_chart_t9cursor_llE"></span><span id="_CPPv2N10lv_chart_t9cursor_llE"></span><span id="lv_chart_t::cursor_ll__lv_ll_t"></span><span class="target" id="structlv__chart__t_1a6fc35f467bab1b3c83f3801565ae38aa"></span><span class="n"><span class="pre">lv_ll_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">cursor_ll</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t9cursor_llE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Linked list for the cursors (stores <a class="reference internal" href="#structlv__chart__cursor__t"><span class="std std-ref">lv_chart_cursor_t</span></a>) </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t4tickE">
<span id="_CPPv3N10lv_chart_t4tickE"></span><span id="_CPPv2N10lv_chart_t4tickE"></span><span id="lv_chart_t::tick__lv_chart_tick_dsc_tA"></span><span class="target" id="structlv__chart__t_1a8b3c8d549bd924428c9adf8ac5f1c24b"></span><a class="reference internal" href="#_CPPv419lv_chart_tick_dsc_t" title="lv_chart_tick_dsc_t"><span class="n"><span class="pre">lv_chart_tick_dsc_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">tick</span></span></span><span class="p"><span class="pre">[</span></span><span class="m"><span class="pre">4</span></span><span class="p"><span class="pre">]</span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t4tickE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t4yminE">
<span id="_CPPv3N10lv_chart_t4yminE"></span><span id="_CPPv2N10lv_chart_t4yminE"></span><span id="lv_chart_t::ymin__lv_coord_tA"></span><span class="target" id="structlv__chart__t_1adccd8d3aa2647e44e561d815c6f38b71"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">ymin</span></span></span><span class="p"><span class="pre">[</span></span><span class="m"><span class="pre">2</span></span><span class="p"><span class="pre">]</span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t4yminE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t4ymaxE">
<span id="_CPPv3N10lv_chart_t4ymaxE"></span><span id="_CPPv2N10lv_chart_t4ymaxE"></span><span id="lv_chart_t::ymax__lv_coord_tA"></span><span class="target" id="structlv__chart__t_1ab4158ce170652c03a48910a3df02dc2c"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">ymax</span></span></span><span class="p"><span class="pre">[</span></span><span class="m"><span class="pre">2</span></span><span class="p"><span class="pre">]</span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t4ymaxE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t4xminE">
<span id="_CPPv3N10lv_chart_t4xminE"></span><span id="_CPPv2N10lv_chart_t4xminE"></span><span id="lv_chart_t::xmin__lv_coord_tA"></span><span class="target" id="structlv__chart__t_1a1ce2a028147e289861398d76ecb80808"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">xmin</span></span></span><span class="p"><span class="pre">[</span></span><span class="m"><span class="pre">2</span></span><span class="p"><span class="pre">]</span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t4xminE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t4xmaxE">
<span id="_CPPv3N10lv_chart_t4xmaxE"></span><span id="_CPPv2N10lv_chart_t4xmaxE"></span><span id="lv_chart_t::xmax__lv_coord_tA"></span><span class="target" id="structlv__chart__t_1a255317662559e13401dc1b2d45222c14"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">xmax</span></span></span><span class="p"><span class="pre">[</span></span><span class="m"><span class="pre">2</span></span><span class="p"><span class="pre">]</span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t4xmaxE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t16pressed_point_idE">
<span id="_CPPv3N10lv_chart_t16pressed_point_idE"></span><span id="_CPPv2N10lv_chart_t16pressed_point_idE"></span><span id="lv_chart_t::pressed_point_id__lv_coord_t"></span><span class="target" id="structlv__chart__t_1a3812acbea310bb50ccca8c7401dd53d9"></span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">pressed_point_id</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t16pressed_point_idE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t8hdiv_cntE">
<span id="_CPPv3N10lv_chart_t8hdiv_cntE"></span><span id="_CPPv2N10lv_chart_t8hdiv_cntE"></span><span id="lv_chart_t::hdiv_cnt__uint16_t"></span><span class="target" id="structlv__chart__t_1af0e5db3cd182b868fb386f7358483af8"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">hdiv_cnt</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t8hdiv_cntE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Number of horizontal division lines </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t8vdiv_cntE">
<span id="_CPPv3N10lv_chart_t8vdiv_cntE"></span><span id="_CPPv2N10lv_chart_t8vdiv_cntE"></span><span id="lv_chart_t::vdiv_cnt__uint16_t"></span><span class="target" id="structlv__chart__t_1a784a2762e94f3a70a96fd868e30e3548"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">vdiv_cnt</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t8vdiv_cntE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Number of vertical division lines </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t9point_cntE">
<span id="_CPPv3N10lv_chart_t9point_cntE"></span><span id="_CPPv2N10lv_chart_t9point_cntE"></span><span id="lv_chart_t::point_cnt__uint16_t"></span><span class="target" id="structlv__chart__t_1a3491fe1e6a097303ab090364e66481b4"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">point_cnt</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t9point_cntE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Point number in a data line </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t6zoom_xE">
<span id="_CPPv3N10lv_chart_t6zoom_xE"></span><span id="_CPPv2N10lv_chart_t6zoom_xE"></span><span id="lv_chart_t::zoom_x__uint16_t"></span><span class="target" id="structlv__chart__t_1a525e9f96bf416eec593cb56d4e046528"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">zoom_x</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t6zoom_xE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t6zoom_yE">
<span id="_CPPv3N10lv_chart_t6zoom_yE"></span><span id="_CPPv2N10lv_chart_t6zoom_yE"></span><span id="lv_chart_t::zoom_y__uint16_t"></span><span class="target" id="structlv__chart__t_1a974c1a14c70b8f3103de94e72996f6d8"></span><span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">zoom_y</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t6zoom_yE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t4typeE">
<span id="_CPPv3N10lv_chart_t4typeE"></span><span id="_CPPv2N10lv_chart_t4typeE"></span><span id="lv_chart_t::type__lv_chart_type_t"></span><span class="target" id="structlv__chart__t_1afac8a8ea212d9fa4c44469fdf7e78d85"></span><a class="reference internal" href="#_CPPv415lv_chart_type_t" title="lv_chart_type_t"><span class="n"><span class="pre">lv_chart_type_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">type</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t4typeE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Line or column chart </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N10lv_chart_t11update_modeE">
<span id="_CPPv3N10lv_chart_t11update_modeE"></span><span id="_CPPv2N10lv_chart_t11update_modeE"></span><span id="lv_chart_t::update_mode__lv_chart_update_mode_t"></span><span class="target" id="structlv__chart__t_1a9ef45cbde6eb0c553d8ac4540bbc23de"></span><a class="reference internal" href="#_CPPv422lv_chart_update_mode_t" title="lv_chart_update_mode_t"><span class="n"><span class="pre">lv_chart_update_mode_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">update_mode</span></span></span><a class="headerlink" href="#_CPPv4N10lv_chart_t11update_modeE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
</dd></dl>

</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="colorwheel.html" class="btn btn-neutral float-right" title="Color wheel (lv_colorwheel)" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="calendar.html" class="btn btn-neutral float-left" title="Calendar (lv_calendar)" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2021, LVGL Kft.
      <span class="lastupdated">
        Last updated on Dec 22, 2024.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                let versionName = "";
                if(version == "master") versionName = "master (latest)";
                else versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });

})
document.addEventListener('DOMContentLoaded', (event) => {
    function onIntersection(entries) {
        entries.forEach(entry => {
            let currentlyLoaded = entry.target.getAttribute("data-is-loaded") == "true";
            let shouldBeLoaded = entry.intersectionRatio > 0;
            if(currentlyLoaded != shouldBeLoaded) {
                entry.target.setAttribute("data-is-loaded", shouldBeLoaded);
                if(shouldBeLoaded) {
                    let iframe = document.createElement("iframe");
                    iframe.src = entry.target.getAttribute("data-real-src");
                    entry.target.appendChild(iframe);
                } else {
                    let iframe = entry.target.querySelector("iframe");
                    iframe.parentNode.removeChild(iframe);
                }
            }
        });
    }
    const config = {
        rootMargin: '600px 0px',
        threshold: 0.01
    };
    let observer = new IntersectionObserver(onIntersection, config);
    document.querySelectorAll(".lv-example").forEach(iframe => {
        observer.observe(iframe);
    });
});
</script>


</body>
</html>